<!DOCTYPE html> <html> <head> <title>移动端轮播</title> <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover,user-scalable=0" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/css/swiper.css"> </head> <body> <div style="height: 300px;" class="swiper-container"> <div class="swiper-wrapper"> <!-- 下面是4个不同颜色的轮播滑块 --> <div style="background-color: #00f;" class="swiper-slide"><a href="#">啊啊啊啊</a></div> <div style="background-color:#ff0;" class="swiper-slide"><a href="#">？？？？</a></div> <div style="background-color: #f00;" class="swiper-slide"><a href="#">咋咋咋</a></div> <div style="background-color: #00f;" class="swiper-slide"><a href="#">木事</a></div> </div> <div class="swiper-button-prev"></div> <!--左箭头--> <div class="swiper-button-next"></div> <!--右箭头--> <div class="swiper-pagination"></div> <!--分页器--> </div> </body> </html> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/js/swiper.js"></script> <script> var mySwiper = new Swiper('.swiper-container', { //初始化Swiper autoplay: { //自动切换 delay: 3000, stopOnLastSlide: false, disableOnInteraction: false, }, navigation: { //前进后退 nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, pagination: { //分页器 el: '.swiper-pagination', clickable: true, }, loop: true, //循环 autoplayDisableOnInteraction: false, //用户操作swiper之后，是否禁止autoplay，默认为true：停止。 }) </script>
