首页>>Jquery图片>>switchable 滑动slide演示(2015-07-12)

switchable 滑动slide演示

 可以控制每次滑动个数

switchable 滑动slide演示
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="container">  
  2. <div class="g_slide" id="slides">  
  3.     <div class="switch_main">  
  4.         <a class="item switch_item" href="#"><img data-src="https://unsplash.it/752/450?image=738" /></a>  
  5.         <a class="item switch_item" href="#"><img data-src="https://unsplash.it/752/450?image=733" /></a>  
  6.         <a class="item switch_item" href="#"><img data-src="https://unsplash.it/752/450?image=635" /></a>  
  7.         <a class="item switch_item" href="#"><img data-src="https://unsplash.it/752/450?image=335" /></a>  
  8.         <a class="item switch_item" href="#"><img data-src="https://unsplash.it/752/450?image=435" /></a>  
  9.     </div>  
  10. </div>  
  11. <br>  
  12. <br>  
  13.   
  14. <div class="g_slide" id="slides1">  
  15.     <div class="switch_main">  
  16.         <a class="item switch_item" href="#"><img data-src="https://unsplash.it/752/450?image=238" /></a>  
  17.         <a class="item switch_item" href="#"><img data-src="https://unsplash.it/752/450?image=133" /></a>  
  18.         <a class="item switch_item" href="#"><img data-src="https://unsplash.it/752/450?image=330" /></a>  
  19.         <a class="item switch_item" href="#"><img data-src="https://unsplash.it/752/450?image=426" /></a>  
  20.     </div>  
  21. </div>  
  22. <br>  
  23. <br>  
  24.   
  25. <div class="scroll" id="scroll_wrap">  
  26.     <div class="scroll_in switch_main">  
  27.         <a class="item" href="#"><img data-src="https://unsplash.it/250/117?image=111" /></a>  
  28.         <a class="item" href="#"><img data-src="https://unsplash.it/250/117?image=121" /></a>  
  29.         <a class="item" href="#"><img data-src="https://unsplash.it/250/117?image=211" /></a>  
  30.         <a class="item" href="#"><img data-src="https://unsplash.it/250/117?image=311" /></a>  
  31.         <a class="item" href="#"><img data-src="https://unsplash.it/250/117?image=411" /></a>  
  32.     </div>  
  33. </div>  
  34.   
  35.   
  36.   
  37.   
  38. $(function(){  
  39.     switchable({  
  40.         $element: $('#slides')  
  41.         ,interval: 2000  
  42.         ,animateSpeed: 500  
  43.           
  44.     });  
  45.     switchable({  
  46.         $element: $('#slides1')  
  47.         ,interval: 2000  
  48.         ,effect: 'fade'  
  49.     });  
  50.     switchable({  
  51.         $element: $('#scroll_wrap')  
  52.         ,interval: 2000  
  53.         ,showNav: true  
  54.         //,effect: 'fade'  
  55.         ,type: 'imgScroll'  
  56.         ,imgScroll: {  
  57.             num: 1  
  58.         }  
  59.     });  
  60. });  
  61. </script>  

 


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