首页>>Jquery图片>>jQuery响应式图片跑马灯 无缝滚动(2018-04-23)

jQuery响应式图片跑马灯 无缝滚动

jQuery响应式图片跑马灯 无缝滚动
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

XML/HTML Code
  1. <ul id="flexiselDemo3">  
  2.     <li><img src="images/1.jpg" alt="" /></li>  
  3.     <li><img src="images/2.jpg" alt="" /></li>  
  4.     <li><img src="images/3.jpg" alt="" /></li>  
  5.     <li><img src="images/4.jpg" alt="" /></li>  
  6. </ul>  
  7. <script type="text/javascript">  
  8.   
  9. $(window).load(function() {  
  10.     $("#flexiselDemo1").flexisel();  
  11.     $("#flexiselDemo2").flexisel({  
  12.         enableResponsiveBreakpoints: true,  
  13.         responsiveBreakpoints: {   
  14.             portrait: {   
  15.                 changePoint:480,  
  16.                 visibleItems: 1  
  17.             },   
  18.             landscape: {   
  19.                 changePoint:640,  
  20.                 visibleItems: 2  
  21.             },  
  22.             tablet: {   
  23.                 changePoint:768,  
  24.                 visibleItems: 3  
  25.             }  
  26.         }  
  27.     });  
  28.   
  29.     $("#flexiselDemo3").flexisel({  
  30.         visibleItems: 5,  
  31.         animationSpeed: 1000,  
  32.         autoPlay: true,  
  33.         autoPlaySpeed: 3000,              
  34.         pauseOnHover: true,  
  35.         enableResponsiveBreakpoints: true,  
  36.         responsiveBreakpoints: {   
  37.             portrait: {   
  38.                 changePoint:480,  
  39.                 visibleItems: 1  
  40.             },   
  41.             landscape: {   
  42.                 changePoint:640,  
  43.                 visibleItems: 2  
  44.             },  
  45.             tablet: {   
  46.                 changePoint:768,  
  47.                 visibleItems: 3  
  48.             }  
  49.         }  
  50.     });  
  51.       
  52. });  
  53. </script>  

 


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