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>这段代码是轮播下的标记点，会自动生成，只需要调整成需要的样式即可
原文地址：https://www.cnblogs.com/sakura-lifangfang/p/9634116.html
时间： 2024-11-11 00:06:16