flexslider.js实现移动端轮播

2019-11-19 17:43:55

字体：大中小

来源：转载

供稿：网友

效果如下：

代码如下：

<!doctype html><html><head><meta charset="utf-8"><title>flexslider.js移动端轮播</title><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"><style>/* reset wap */body,p,a,div,ol,ul,li,dl,dd,h1,h2,h3,h4,h5,h6,input,iframe,nav,header,footer { margin: 0; padding: 0; list-style: none;}body { font: 16px Microsoft YaHei, sans-serif; -webkit-tap-highlight-color: transparent; color: #2a2b2c; background: #fff;}*, *::before, *::after { outline: none; box-sizing: border-box;}a,img { text-decoration: none; display: block; color: #2a2b2c; border: 0;}.wrapper { width: 360px; margin: 100px auto;}.h1s { margin: 40px 10px 10px 10px; font: 20px Microsoft YaHei;}/* flexslider */.flexslider { height: 180px; position: relative; background: #f5f5f5; overflow: hidden;}.flex-viewport { height: 100%;}.slides { height: 100%; position: relative; z-index: 1;}.slides li { height: 100%;}.slides li a { display: block; height: 100%; position: relative;}.flexslider li img { display: block; width: 100%; height: 100%; display: none;}.flex-control-nav { text-align: center; padding: 0 5px; position: absolute; right: 0; bottom: 3px; z-index: 2;}.flex-control-nav li { display: inline-block; width: 8px; height: 8px; margin: 0 3px;}.flex-control-nav a { display: block; height: 100%; line-height: 40px; overflow: hidden; border: 1px solid #fff; border-radius: 55%;}.flex-control-nav .flex-active { background: #fff;}.flexslider .ps1 { width: 100%; height: 25px; color: #fff; background: rgba(0,0,0,.5); padding: 0 50px 0 10px; font: 14px/27px Microsoft YaHei; text-align: left; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: absolute; bottom: 0; left: 0;}</style></head><body><div class="wrapper"> <div class="flexslider">  <ul class="slides">   <li>    <a href="">     <img src="http://ww2.sinaimg.cn/large/bea70753gw1f6fg9db318j21hc0m8n61.jpg" alt="">     <p class="ps1">图片标题</p>    </a>   </li>   <li>    <a href="">     <img src="http://ww4.sinaimg.cn/large/bea70753gw1f6fg9e38eyj21hc0m8tht.jpg" alt="">     <p class="ps1">图片标题</p>    </a>   </li>   <li>    <a href="">     <img src="http://ww4.sinaimg.cn/large/bea70753gw1f6fg9enyp1j21hc0m8465.jpg" alt="">     <p class="ps1">图片标题</p>    </a>   </li>  </ul> </div></div><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script src="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></body></html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：JavaScript制作简易计算器（不用eval）

下一篇：简单实现js悬浮导航效果