這篇文章主要介紹了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程序設計有所幫助。