這篇文章主要介紹了js實現(xiàn)索引圖片切換效果的代碼，特別炫酷的效果，推薦給大家，感興趣的小伙伴們可以參考一下

本文實例講述了js實現(xiàn)索引圖片切換效果的代碼。分享給大家供大家參考。具體如下：

運行效果截圖如下：

具體代碼如下

html代碼：

1. <div id="slideshowHolder"> 
2. <img src="img/1.jpg" /> 
3. <img src="img/2.jpg" /> 
4. <img src="img/3.jpg" /> 
5. </div> 

css代碼：

1. .ft-prev, .ft-next { 
2. background-color: #000; 
3. padding: 0 10px; 
4. color:#fff; 
5. } 

js代碼：

1. $(document).ready(function () { 
2. $('#slideshowHolder').jqFancyTransitions({ 
3. effect: '', // wave, zipper, curtain 
4. width: 500, // width of panel 
5. height: 700, // height of panel 
6. strips: 20, // number of strips 
7. delay: 5000, // delay between images in ms 
8. stripDelay: 50, // delay beetwen strips in ms 
9. titleOpacity: 0.7, // opacity of title 
10. titleSpeed: 1000, // speed of title appereance in ms 
11. position: 'alternate', // top, bottom, alternate, curtain 
12. direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate 
13. navigation: true, // prev and next navigation buttons 
14. links: true // show images as links 
15. }); 
16. }); 

以上就是js實現(xiàn)索引圖片切換效果的主要代碼，希望對大家動手實現(xiàn)圖片切換效果。