滑块中的淡入不起作用



为什么省略最后一张幻灯片?如何修复它以在侧向加载后立即显示第一个图像,而无需等待?我已经尝试了所有方法,但无法解决,总是有一些问题(同时显示两个图像等(,现在这个。

<!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>

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);

        }

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 循环。

最新更新