jquery实现简单的自动播放幻灯片效果

本文实例讲述了jquery实现简单的自动播放幻灯片效果。分享给大家供大家参考。具体实现方法如下：
html部分：

<div id="slideshow"><div> <img src="images/5224/5658667829_2bb7d42a9c_m.jpg"></div><div> <img src="images/5230/5638093881_a791e4f819_m.jpg"></div><div> Pretty cool eh? This slide is proof the content can be anything.</div></div>

CSS部分：

/* Slides need to be absolutely positioned within the wrapper.This has a tiny bit of extra pizazz: */#slideshow {margin: 50px auto;position: relative;width: 240px;height: 240px;padding: 10px;box-shadow: 0 0 20px rgba（0,0,0,0.4）;}#slideshow > div {position: absolute;top: 10px;left: 10px;right: 10px;bottom: 10px;}

jQuery部分：

//Run after DOM is ready.$（"#slideshow > div:gt（0）"）.hide（）;setInterval（function（） { $（"#slideshow > div:first"）.fadeOut（1000）.next（）.fadeIn（1000）.end（）.appendTo（"#slideshow"）;}, 3000）;

希望本文所述对大家的jQuery程序设计有所帮助。