简单的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,没有必要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);