简单的jQuery淡入淡出图像

-4

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

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

来源

2013-02-06 Jay Smoke

whathaveyoutried.com –

褪色？在页面加载？在悬停???等等需要更多细节。 – Michael

haveYouEvenTried.com – writeToBhuwan

选择UL里内的所有相似图片$('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);

来源

2013-02-06 16:10:26 Anton

hello @Anton，脚本可以工作，但我有两个问题，1.当循环到达最后一个图像时，第一张图片再次显示。它可以无缝吗？ 2.你如何控制速度？非常感谢。 –

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

来源

2013-02-06 16:12:30 Jing

这是最简单的我可以它是一个圆形的画廊，它在它结束时重新开始。

这里是一个小提琴：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>

来源

2013-02-06 17:33:41

通过控制淡入淡出定时器的方式，用你想要的功能添加一个参数。例如：'fadeIn（1000）;' –

Thanx Toni，但不是某些IE浏览器尚未支持的第n个孩子？ –

@JaySmoke我在IE7 8和9中测试了这个例子，它的工作原理可能是'：nth-child'在IE选择器中不支持，但是在jQuery中它可以工作... –

简单的jQuery淡入淡出图像

回答

相关问题