<html> <head> <link href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.min.css" rel="stylesheet" type="text/css" /> </head> <body> <!--轮播111--> <div style="height:100px" class="swiper-container banner1"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href='' class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="111" /></a></div> <div class="swiper-slide"><a href='' class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="广告2" /></a></div> <div class="swiper-slide"><a href='' class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="淘宝" /></a></div> </div> <!-- 分页器 --> <div class="swiper-pagination"></div> </div> <br> <br> <br> <!--轮播222--> <div style="height:100px" class="swiper-container banner2"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href='' class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="111" /></a></div> <div class="swiper-slide"><a href='' class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="广告2" /></a></div> </div> <!-- 分页器 --> <div class="swiper-pagination"></div> </div> <br> <br> <br> <!--轮播333--> <div style="height: 120px" class="swiper-container banner3"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href='' class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="111" /></a></div> <div class="swiper-slide"><a href='' class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="广告2" /></a></div> </div> <!-- 分页器 --> <div class="swiper-pagination"></div> </div> <script src="https://cdn.bootcss.com/Swiper/4.3.0/js/swiper.min.js" type="text/javascript"></script> <script> /*轮播111*/ var mySwiper = new Swiper('.banner1', { autoplay: true,//可选选项，自动滑动 pagination: { el: '.swiper-pagination', }, }) /*轮播222*/ var mySwiper = new Swiper('.banner2', { // autoplay: true,//可选选项，自动滑动 pagination: { el: '.swiper-pagination', }, }) /*轮播333*/ var mySwiper = new Swiper('.banner3', { // autoplay: true,//可选选项，自动滑动 pagination: { el: '.swiper-pagination', }, }) </script> </body> </html>
来源：博客园
作者：ctwanyou
链接：https://www.cnblogs.com/ctwanyou/p/11596000.html