Swiper3 寫一個輪播圖
阿新 • • 發佈：2018-12-30
女朋友需要在移動端實現一個輪播，她沒找到合適的。 ， 。 我也是服氣
直接上程式碼：
<!DOCTYPE html> <html> <head> <title>輪播啊輪播</title> <style> .swiper-container { width: 600px; height: 300px; } .swiper-slide{ width: 600px; height: 300px; } .swiper-slide img{ width: 100%; height: 100%; } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531822901402&di=c275112a988573345707a0e85f994944&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F8c1001e93901213fe4c06e3958e736d12e2e9567.jpg"/> </div> <div class="swiper-slide"> <img src="https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=55f57896a1345982da8ae3923cf5310b/9358d109b3de9c821370156d6081800a19d8433f.jpg"> </div> <div class="swiper-slide"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531822901400&di=c792d46ebf14cac509ebb11a88417170&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb219ebc4b74543a96a58c53112178a82b801148f.jpg" alt=""></div> </div> <!-- 分頁器 --> <div class="swiper-pagination"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531822901402&di=c275112a988573345707a0e85f994944&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F8c1001e93901213fe4c06e3958e736d12e2e9567.jpg"/> </div> <!-- 導航按鈕 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 滾動條 --> <div class="swiper-scrollbar"></div> </div> <script> window.onload = function() { var mySwiper = new Swiper ('.swiper-container', { // 輪播圖的方向，也可以是vertical方向 direction:'horizontal', //播放速度 loop: true, // 自動播放時間 autoplay:1000, // 播放的速度 speed:2000, // 如果需要分頁器，即下面的小圓點 pagination: '.swiper-pagination', // 如果需要前進後退按鈕 nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', // 這樣，即使我們滑動之後， 定時器也不會被清除 autoplayDisableOnInteraction : false, // 如果需要滾動條 scrollbar: '.swiper-scrollbar', }); } </script> </body> </html>
線上演示地址：地址