Question

我制作了一个简单的图像滑块，淡入图像，将其淡出，而另一个淡入，无限循环。但是，这不会马上起作用。它只有在完整的圆圈之后才能工作。这意味着：所有6张图片都已被看到。然后循环在图像1处再次开始并且淡入效果起作用。为什么呢？

这是HTML：

<body onload="Slider();">

<div id="container">
    <div id="slider">   

        <img id="img1" src="photos/everything/slide1.jpg" border="0"/>
        <img id="img2" src="photos/everything/slide2.jpg" border="0"/>
        <img id="img3" src="photos/everything/slide3.jpg" border="0"/>
        <img id="img4" src="photos/everything/slide4.jpg" border="0"/>
        <img id="img5" src="photos/everything/slide5.jpg" border="0"/>
        <img id="img6" src="photos/everything/slide6.jpg" border="0"/>

    </div>
</div>

</body>

这是javascript：

function Slider() {
    $("#slider #img1").show("fade", 500);
    $("#slider #img1").delay(5500).hide("fade", 500);

    var sc=$("#slider img").size();
    var count=2;

    setInterval(function(){
        $("#slider #img"+count).show("fade",500);
        $("#slider #img"+count).delay(5500).hide("fade", 500);

        if(count==sc){
            count=1;
        }else{
            count = count + 1;  
        }
    },6500);
}

用于此页面的CSS：

#slider{
    height: 600px;
    overflow: hidden;
    margin: 0 auto;
    padding-top: 10px;
}

#slider img{
    height: 100%;
    max-width: none;
    display: block;
    border-radius: 10px;
    margin: 0 auto; 
}

Answer 1

褪色效果最初不起作用，因为所有图像都可见，然后淡出它们。

为避免这种情况，请在您的css中使用display:none;。

然后你可以创建一个函数nextSlide()，每隔 XX 毫秒调用一次。

例如：

var sc=$("#slider img").size();
// Set count to 0 so that it goes to 1 on first call
var count=0;
// Call it for the first time
nextSlide();

function nextSlide(){
    // Go forward or back to the beginning?
    count=count==sc?1:++count;
    // FadeIn, wait, fadeOut
    $("#slider #img"+count).fadeIn(500).delay(1500).fadeOut(500);
    // Do the same thing in 2500 milliseconds
    setTimeout(nextSlide,2500);
}

jQuery图像滑块淡入淡出效果不起作用

1 个答案:

JS Fiddle Demo