slide on js does not work

Asked

Viewed 137 times

1

I have the following problem I have 3 images with the following names and extensions:

f1.jpg
f2.jpg
f3.jpg

and I’m making a slide with JS but the first image and loaded correctly but when I click the next button it fails the next image does not appear follow the code:

the JS:

<script language="javascript">

        function preload(){
            imgs = Array('f1.jpg','f2.jpg','f3.jpg');
            imgQtde = imgs.length;
            for(i = 0;1<imgQtde;i++){
                var preloadimg = new image();
                preloadimg.src = imgs[i];
            }
        }

        function iniciaSlider(){
            preload();
            max = 3;
            min = 1;
            fi = 1;
            tr=true;
            carregafoto("images/slide/f1.jpg");
            document.getElementById("moldura").addEventListener("transitionend",fimTr);
        }

        function fimTr(){
            tr = true;
        }

        function carregafoto(foto){
            document.getElementById("moldura").style.backgroundImage = "URL("+foto+")";
        }

        function prox(){
            if(tr){
                tr = false;
                fi++;
                if (fi>max){
                    fi = min;
                }
                carregafoto("f"+fi+ ".jpg");    
            }
        }

        function ant(){
            if(tr){
                tr = false;
                fi--;
                if (fi<min){
                    fi = max;
                }
                carregafoto("f"+fi+ ".jpg");    
            }
        }
    </script>

the HTML:

<input type="button" value="anterior" onclick="ant()" />
<input type="button" value="proximo" onclick="prox()" />

THE CSS:

#moldura{
    width: 100%;
    height: 450px;
    background-color: #eee;
    transition:background-image 2s;
    background-size: 100% 100%; 

}

where I’m missing I’ve looked and I’ve looked several times more it doesn’t work

#moldura {
  width: 100%;
  height: 450px;
  background-color: #eee;
  transition: background-image 2s;
  background-size: 100% 100%;
}
<!DOCTYPE html>

<head>
  <title>DEVDREAM</title>
  <meta name="" charset="UFT-8" />
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="js/menu.js"></script>
  <script src="js/jquery.js"></script>
  <script language="javascript">
    function preload() {
      imgs = Array('f1.jpg', 'f2.jpg', 'f3.jpg');
      imgQtde = imgs.length;
      for (i = 0; 1 < imgQtde; i++) {
        var preloadimg = new image();
        preloadimg.src = imgs[i];
      }
    }

    function iniciaSlider() {
      preload();
      max = 3;
      min = 1;
      fi = 1;
      tr = true;
      carregafoto("images/slide/f1.jpg");
      document.getElementById("moldura").addEventListener("transitionend", fimTr);
    }

    function fimTr() {
      tr = true;
    }

    function carregafoto(foto) {
      document.getElementById("moldura").style.backgroundImage = "URL(" + foto + ")";
    }

    function prox() {
      if (tr) {
        tr = false;
        fi++;
        if (fi > max) {
          fi = min;
        }
        carregafoto("f" + fi + ".jpg");
      }
    }

    function ant() {
      if (tr) {
        tr = false;
        fi--;
        if (fi < min) {
          fi = max;
        }
        carregafoto("f" + fi + ".jpg");
      }
    }
  </script>
</head>

<body onload="iniciaSlider()">
  <header>
    <div id="moldura"></div>
    <input type="button" value="anterior" onclick="ant()" />
    <input type="button" value="proximo" onclick="prox()" />
  </header>
</body>

</html>

javascript html css3

  • If you can paste html, javascript and css into Jsfiddle, Saving and posting the link in question will greatly facilitate the analysis and testing of your code!

  • OK just a minute

  • @Danieldutra put already friend however I only do not know how to link the images in this jsfiddle

  • 1

    Giving error in this if (tr) {} only let it public :)

  • Makes sense, that one tr is being used in the whole code, but I don’t see it being declared outside a method...

1 answer

1

From what I’ve seen the error is here:

for(i = 0;1<imgQtde;i++){
   var preloadimg = new image();
   preloadimg.src = imgs[i];
}

In the FOR you said that I == 0; in the next condition of your FOR you put the 1 and not the I, The correct is: (i = 0; i < imgQtde; i++)

Browser other questions tagged javascript html css3

You are not signed in. Login or sign up in order to post.