Question

我是否可以使用任何脚本来创建幻灯片，其中图片淡出而另一个替换它。我使用下面的列表列出图像。我看到的脚本目前左右滑动图像，但没有一个淡出。

<ul class="slideshow">
<li><img src="images/image1.gif" /></li>
<li><img src="images/image2.gif" /></li>
<li><img src="images/image3.gif" /></li>
<li><img src="images/image4.gif" /></li>
<li><img src="images/image5.gif" /></li>
<li><img src="images/image6.gif" /></li>
</ul>

Answer 1

这是我能得到的最简单的，它是一个圆形的画廊，当它到达终点时它会重新开始。

这是一个小提琴：http://jsfiddle.net/KA4Zq/

var count = 1;
setInterval(function() {
    count = ($(".slideshow :nth-child("+count+")").fadeOut().next().length == 0) ? 1 : count+1;
    $(".slideshow :nth-child("+count+")").fadeIn();
}, 2000);

你唯一应该改变的是2000值（2秒）。如果您向图库添加更多图像，则无需设置任何其他变量，脚本会自行完成所有操作...

为简单起见，我也改变了你的html，不需要ul list，只需要div里面的图片：

<div class="slideshow">
    <img src="" />
    <img src="" />
    ...
</div>

Answer 2

选择ul li中的所有图片，例如$('ul li img')，然后使用.fadeIn()让图片淡入。

$('ul li img').fadeIn('slow');

要制作幻灯片，您可以使用interval和:eq()

      var cnt = 0; 
setInterval(function(){
        cnt ==7 ? cnt=0:cnt++
        $('ul li img').fadeOut('');
        $('ul li img:eq('+cnt+')').fadeIn(1000)
    },1000);

Answer 3

$("ul > img").fadeOut().fadeIn()

简单的jQuery淡出淡出图像

3 个答案: