Question

为什么省略最后一张幻灯片？如何修复它以显示侧面加载后的第一张图像，而无需等待？我已经尝试了一切，无法解决它，总是有些问题（同时显示两个图像等），现在就这样了。

<!DOCTYPE html>
<html lang="pl">
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="https://use.fontawesome.com/19445204e2.js"></script>
        <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
        
        <script type="text/javascript">

        // Startowy slajd
        var numer = 0;
 
        function changeslide()
        {
            var imagesnumber=document.getElementById("slider").getElementsByTagName("img");

            for(var i = 0; i < imagesnumber.length; i++)
            {
                imagesnumber[i].style.display = "none";
            }
                
            // Wyswietlam aktualny index                
            $("#slide"+numer).fadeIn(500).css('display','block');

            if(numer >= imagesnumber.length-1)
                numer = 0;
            else
                numer++;
            
            timer1 = setTimeout("changeslide()", 3000);
        }
        </script>
        
    </head>
    <body onload="changeslide()">
        <div id="slider">
            <img src="slides/img1.jpg" id="slide1">
            <img src="slides/img2.jpg" id="slide2">
            <img src="slides/img3.jpg" id="slide3">
            <img src="slides/img4.jpg" id="slide4">
            <img src="slides/img5.jpg" id="slide5">
        </div>
    </body>
</html>

Answer 1

function changeslide() {
  if (typeof this.numer === "undefined") this.numer = 1;
  var imagesnumber = document.getElementById("slider").getElementsByTagName("img");

  $("#slider img").css("display", "none");
  $("#slide" + numer).fadeIn(500).css('display', 'block');

  if (this.numer >= imagesnumber.length)
    this.numer = 1;
  else
    this.numer++;

  timer1 = setTimeout(changeslide, 3000);
}

我将计数器移到了函数中，所以你不要把你的变量弄得乱七八糟。

计数器过早重启，我用jquery解决方案替换了你的for循环。

Answer 2

var numer = 0;

function changeslide(){
            var timeout=0;
            if(numer!==0){
              timeout=3000;
            }
            var imagesnumber=document.getElementById("slider").getElementsByTagName("img");



            for(var i = 0; i < imagesnumber.length; i++)
                {
                    imagesnumber[i].style.display = "none";
                }

            // Wyświetlam aktualny index

            $("#slide"+numer).fadeIn(500).css('display','block');


            if(numer >= imagesnumber.length-1)
                numer = 0;

            else
                numer++;



            timer1 = setTimeout("changeslide()", timeout);


        }

PEN

滑块中的Fadein不起作用

2 个答案: