代码如下：
<!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"> <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> <div> <ul> <li> <a href=""> <img src="https://ww2.sinaimg.cn/large/bea70753gw1f6fg9db318j21hc0m8n61.jpg" alt=""> <p>图片标题</p> </a> </li> <li> <a href=""> <img src="https://ww4.sinaimg.cn/large/bea70753gw1f6fg9e38eyj21hc0m8tht.jpg" alt=""> <p>图片标题</p> </a> </li> <li> <a href=""> <img src="https://ww4.sinaimg.cn/large/bea70753gw1f6fg9enyp1j21hc0m8465.jpg" alt=""> <p>图片标题</p> </a> </li> </ul> </div> </div> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://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>