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

这篇文章主要介绍了jquery实现简单的自动播放幻灯片效果,较为详细的介绍了html页面布局、css样式设置及jQuery控制自动播放幻灯的相关技巧,需要的朋友可以参考下

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

html部分：

1. <div id="slideshow"> 
2. <div> 
3. <img src="images/5224/5658667829_2bb7d42a9c_m.jpg"> 
4. </div> 
5. <div> 
6. <img src="images/5230/5638093881_a791e4f819_m.jpg"> 
7. </div> 
8. <div> 
9. Pretty cool eh? This slide is proof the content can be anything. 
10. </div> 
11. </div> 

CSS部分：

1. /* Slides need to be absolutely positioned within the wrapper. 
2. This has a tiny bit of extra pizazz: */ 
3. #slideshow { 
4. margin: 50px auto; 
5. position: relative; 
6. width: 240px; 
7. height: 240px; 
8. padding: 10px; 
9. box-shadow: 0 0 20px rgba(0,0,0,0.4); 
10. } 
11. #slideshow > div { 
12. position: absolute; 
13. top: 10px; 
14. left: 10px; 
15. right: 10px; 
16. bottom: 10px; 
17. } 

jQuery部分：

1. //Run after DOM is ready. 
2. $("#slideshow > div:gt(0)").hide(); 
3. setInterval(function() { 
4. $('#slideshow > div:first') 
5. .fadeOut(1000) 
6. .next() 
7. .fadeIn(1000) 
8. .end() 
9. .appendTo('#slideshow'); 
10. }, 3000); 

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