首页>>焦点图>>自适应焦点图插件hiSlider 支持触控(2017-05-13)

自适应焦点图插件hiSlider 支持触控

自适应焦点图插件hiSlider 支持触控
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <h2>example3: 支持触摸事件 + 弹性布局 (请在移动端测试)</h2>  
  2.     <ul class="hiSlider hiSlider3">  
  3.         <li class="hiSlider-item"><img src="images/1.jpg" alt="11111"></li>  
  4.         <li class="hiSlider-item"><img src="images/2.jpg" alt="22222"></li>  
  5.         <li class="hiSlider-item"><img src="images/3.jpg" alt="33333"></li>  
  6.         <li class="hiSlider-item"><img src="images/4.jpg" alt="44444"></li>  
  7.         <li class="hiSlider-item"><img src="images/5.jpg" alt="55555"></li>  
  8.     </ul>  

 

JavaScript Code
  1. <script>  
  2.     $('.hiSlider1').hiSlider();  
  3.     $('.hiSlider2').hiSlider({  
  4.         isFlexible: true,  
  5.         mode: 'fade',  
  6.         isSupportTouch: false,  
  7.         isShowTitle: false,  
  8.         isShowPage: false,  
  9.         titleAttr: function(curIdx){  
  10.             return $('img', this).attr('alt');  
  11.         }  
  12.     });  
  13.     $('.hiSlider3').hiSlider({  
  14.         isFlexible: true,  
  15.         isSupportTouch: true,  
  16.         titleAttr: function(curIdx){  
  17.             return $('img', this).attr('alt');  
  18.         }  
  19.     });  
  20.     $('.hiSlider4').hiSlider({  
  21.         startSlide: 2,  
  22.         direction: 'top'  
  23.     });  
  24. </script>  

 


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