在这里记录几种可以原生实现的轮播图

第一种实现的逻辑：

  • css核心是overflow ：hidden，给最外层父盒子div设置该属性并且只给容纳一张图的宽高，给其中子元素wrap盒子设置成五倍其大小，并排排列，这样每次只能显示五分之一wrap盒子的内容即一张图片的内容，每次移动一个图片。
  • 给wrap盒子设置一个left属性，通过js控制该属性，让页面显示不同的wrap部分内容。
  • js没啥重点，获取页面相关元素节点后，通过for循环设置小圆点按钮，定义pre  next俩个函数，并为左右箭头绑定俩函数 ，最后 通过setInterval方法包装next函数,定时触发next 实现轮播效果。

具体代码如下：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8     <title>Document</title>
  9 </head>
 10 <style>
 11     .container {
 12         position: relative;
 13         width: 600px;
 14         height: 400px;
 15         overflow: hidden;
 16         margin: 0 auto;
 17     }
 18 
 19     .container .wrap {
 20         position: absolute;
 21         width: 3000px;
 22         height: 400px;
 23         transition: all 1s;
 24     }
 25 
 26     .container .wrap img {
 27         float: left;
 28         width: 600px;
 29         height: 400px;
 30     }
 31 
 32     .container .buttons {
 33         display: flex;
 34         position: absolute;
 35         bottom: 15px;
 36         left: 225px;
 37         width: 150px;
 38         height: 10px;
 39     }
 40 
 41     .container .buttons span {
 42         flex: 1;
 43         margin: 0 5px;
 44         height: 20px;
 45         width: 20px;
 46         border-radius: 50%;
 47         background: rgb(198, 200, 185);
 48         text-align: center;
 49         cursor: pointer;
 50     }
 51 
 52     .container .buttons span.active {
 53         background-color: rgb(206, 250, 9);
 54         
 55     }
 56 
 57     .container .arrow {
 58         position: absolute;
 59         top: 5%;
 60         bottom: 5%;
 61         color: rgb(215, 221, 209);
 62         text-align: center;
 63         font-size: 50px;
 64         padding: 160px 14px;
 65         cursor: pointer;
 66     }
 67 
 68     .container .arrowL {
 69         left: 10px;
 70 
 71     }
 72     .container .arrowR{
 73         right: 10px;
 74 
 75     }
 76     #img1{
 77         background: red;
 78     }
 79     #img2{
 80         background: orange;
 81     }
 82     #img3{
 83         background: yellow;
 84     }
 85     #img4{
 86         background: green;
 87     }
 88     #img5{
 89         background: blue;
 90     }
 91 </style>
 92 
 93 <body>
 94     <div class="container">
 95         <div class="wrap" style="left: 0 " >
 96             <img id="img1" src="./picture/1.jpg" alt="">
 97             <img id="img2" src="./picture/2.jpg" alt="">
 98             <img id="img3" src="./picture/3.jpg" alt="">
 99             <img id="img4" src="./picture/4.jpg" alt="">
100             <img id="img5" src="./picture/5.png" alt="">
101         </div>
102         <div class="buttons">
103             <span class="active">1</span>
104             <span>2</span>
105             <span>3</span>
106             <span>4</span>
107             <span>5</span>
108         </div>
109         <a class="arrow arrowL"> < </a>
110         <a class="arrow arrowR"> > </a>
111     </div>
112     <script>
113         let container = document.querySelector(\'.container\')
114         let wrap = document.querySelector(\'.wrap\')
115         let next = document.querySelector(\'.arrowR\')
116         let pre = document.querySelector(\'.arrowL\')
117         let buttons = document.getElementsByTagName(\'span\')
118         let index = 0  //当前展示的图片索引
119 
120         next.onclick  = function () {
121             nextPic()
122         }
123         pre.onclick = function () {
124             prePic()
125         }
126         //按钮模块
127         function showCurrentButton() {
128             for (let i = 0 ; i < buttons.length ; i++ ){
129                 buttons[i].className  = ""
130             }
131             buttons[index].className = \'active\'
132         }
133         for(let i = 0 ; i<buttons.length;i++){
134             clickButton(i)
135         }
136         function clickButton(i) {
137             buttons[i].onclick = function(){
138                 wrap.style.left = i*(-600)+"px"
139                 index= i
140                 showCurrentButton()
141             }
142         }
143 
144         // 右箭头
145         function nextPic (){
146             index++;
147             let newLeft;
148             if(wrap.style.left =="-2400px"){
149                 newLeft = 0;
150                 index = 0
151             }else{
152                 newLeft = parseInt(wrap.style.left)  - 600
153             }
154             wrap.style.left = newLeft+ \'px\'
155             showCurrentButton()
156         } 
157         //左箭头
158         function prePic(){
159             index--;
160             let newLeft;
161             if(wrap.style.left =="0px"){
162                 newLeft = -2400;
163                 index = 4
164             }else{
165                 newLeft = parseInt(wrap.style.left)  + 600
166             }
167             wrap.style.left = newLeft+ \'px\'
168             showCurrentButton()
169 
170         }
171         //自动轮播
172         function autoPlay(){
173             timer = setInterval(nextPic, 1000)
174         }
175         autoPlay()
176         
177         //鼠标悬停
178         container.onmouseenter = function(){
179             clearInterval(timer)
180         }
181         container.onmouseleave = function () {
182             autoPlay()
183         }
184     </script>
185 </body>
186 
187 </html>

View Code

 

 

 

 

 

 

 

 

 

 

 

 

版权声明：本文为zxf906原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/zxf906/p/15183159.html