jquery - 简单的jQuery淡入淡出图像

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，不需要 a ul list，只需 adiv里面有图像：

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