基于swiper的轮播
Posted sakura-lifangfang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于swiper的轮播相关的知识，希望对你有一定的参考价值。
html代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 7 <title>首页</title> 8 <link rel="stylesheet" href="../css/swiper.min.css"> 9 <style type="text/css"> 10 body{margin: 0;} 11 img{display: block;width: 100%;border: 0;} 12 #swiper-pagination span{ 13 margin-right: .1rem; 14 margin-left: 0; 15 } 16 #swiper-pagination{ 17 position: absolute; 18 bottom: .3rem; 19 right: .3rem; 20 width: auto; 21 left: auto; 22 } 23 #swiper-pagination .swiper-pagination-bullet{ 24 width: .15rem; 25 height: .15rem; 26 opacity: 1; 27 background-color: rgba(255,255,255,.6); 28 } 29 #swiper-pagination .swiper-pagination-bullet-active{ 30 width: .3rem; 31 height: .15rem; 32 border-radius: .15rem; 33 background-color: rgba(255,255,255,.4); 34 } 35 .wrapper { 36 /*max-width: 7.5rem; 37 min-width: 3.2rem; 38 margin: 0 auto;*/ 39 font-size: .2rem; 40 overflow-x: hidden; 41 } 42 </style> 43 </head> 44 <body> 45 <div class="wrapper"> 46 <div class="banner swiper-container"> 47 <div class="swiper-wrapper"> 48 <a class="swiper-slide"><img src="../images/banner.png"></a> 49 <a class="swiper-slide"><img src="../images/banner.png"></a> 50 <a class="swiper-slide"><img src="../images/banner.png"></a> 51 <a class="swiper-slide"><img src="../images/banner.png"></a> 52 <a class="swiper-slide"><img src="../images/banner.png"></a> 53 </div> 54 <div class="swiper-pagination" id="swiper-pagination"></div> 55 </div> 56 </div> 58 <script type="text/javascript" src="../js/zepto.js"></script> 60 <script type="text/javascript" src="../js/swiper.min.js"></script> 61 <script type="text/javascript"> 62 function w() { 63 var r = document.documentElement; 64 var a = parseInt(r.getBoundingClientRect().width); 65 if (!a) return; 66 //rem = a / 7.5; 67 rem = a / 7.5; 68 r.style.fontSize = rem + "px" 69 } 70 var t; 71 w(); 72 window.addEventListener("resize", function() { 73 clearTimeout(t); 74 t = setTimeout(w, 300) 75 }, false); 76 var mySwiper = new Swiper(‘.swiper-container‘,{ 77 autoplay : 3000, 78 autoplayDisableOnInteraction : false, 79 loop : true, 80 pagination : ‘.swiper-pagination‘, 81 }) 82 </script> 83 </body> 84 </html>
1
使用时需要引入swiper的css和js文件，也可以使用jquery，
<div class="swiper-pagination" id="swiper-pagination"></div>
这段代码是轮播下的标记点，会自动生成，只需要调整成需要的样式即可
以上是关于基于swiper的轮播的主要内容，如果未能解决你的问题，请参考以下文章