flexslider.js实现移动端轮播

时间：2021-05-28

效果如下：

代码如下：

<!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>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 { 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>

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章