首页>>焦点图>>带放大镜功能的jQuery轮播图(2018-08-02)

带放大镜功能的jQuery轮播图

带放大镜功能的jQuery轮播图
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="thumbs">  
  2. <div id="nav-left-thumbs"><</div>  
  3. <div id="pics-thumbs">  
  4. <img src="nature1.jpg" alt="Nature1" />  
  5. <img src="nature2.png" alt="Nature2" />  
  6. <img src="nature3.png" alt="Nature3" />  
  7. <img src="nature4.png" alt="Nature4" />  
  8. <img src="nature3.png" alt="Nature5" />  
  9. <img src="nature1.jpg" alt="Nature1" />  
  10. <img src="nature2.png" alt="Nature2" />  
  11. <img src="nature3.png" alt="Nature3" />  
  12. <img src="nature4.png" alt="Nature4" />  
  13. </div>  
  14. <div id="nav-right-thumbs">></div>  
  15. </div>  

 

JavaScript Code
  1. <script>  
  2.             $(document).ready(function() {  
  3.                 $('#view').setZoomPicture({  
  4.                     thumbsContainer: '#pics-thumbs',  
  5.                     prevContainer: '#nav-left-thumbs',  
  6.                     nextContainer: '#nav-right-thumbs',  
  7.                     zoomContainer: '#zoom',  
  8.                     zoomLevel: 2,  
  9.                     loadMsg: 'Chargement...'  
  10.                 });   
  11.             });  
  12.         </script>  

 


原文地址:http://www.freejs.net/article_jiaodiantu_658.html