[flexslider.js]flexslider.js实现移动端轮播

时间:2021-06-14  来源:flex  阅读:

效果如下:

代码如下:

 代码如下

flexslider.js移动端轮播

 

  

   

    

     

     图片标题

    

   

   

    

     

     图片标题

    

   

   

    

     

     图片标题

    

   

  

 

<scriptsrc="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<scriptsrc="http://cdn.bootcss.com/flexslider/2.6.2/jquery.flexslider.min.js"></script>

<script>

$(function () {

 $('.flexslider').flexslider({

  directionNav: false,   //是否显示左右控制按钮

  controlNav: true,   //是否显示底部切换按钮

  pauseOnAction: false,  //手动切换后是否继续自动轮播,继续(false),停止(true),默认true

  animation: 'slide',   //淡入淡出(fade)或滑动(slide),默认fade

  slideshowSpeed: 5000,  //自动轮播间隔时间(毫秒),默认5000ms

  animationSpeed: 150,   //轮播效果切换时间,默认600ms

  direction: 'horizontal',  //设置滑动方向:左右horizontal或者上下vertical,需设置animation: "slide",默认horizontal

  randomize: false,   //是否随机幻切换

  animationLoop: true   //是否循环滚动

 });

 setTimeout($('.flexslider img').fadeIn());

});

</script>

[flexslider.js]flexslider.js实现移动端轮播

http://m.bbyears.com/flash/123616.html

推荐访问:
相关阅读 猜你喜欢
本类排行 本类最新