Java教程

轮播图的实现

本文主要是介绍轮播图的实现，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

第一种实现的逻辑：

  • 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     .div {
 12         position: relative;
 13         width: 600px;
 14         height: 400px;
 15         overflow: hidden;
 16         margin: 0 auto;
 17     }
 18     .div .box{
 19         height: 400px;
 20     }
 21     .div .wrap {
 22         position: absolute;
 23         width: 3000px;
 24         height: 400px;
 25         /* z-index: 1; */
 26         transition:all 1s
 27     }
 28 
 29     .div .wrap img {
 30         float: left;
 31         width: 600px;
 32         height: 400px;
 33     }
 34 
 35     .div .buttons {
 36         display: flex;
 37         position: absolute;
 38         bottom: 20px;
 39         left: 225px;
 40         width: 150px;
 41         height: 10px;
 42         z-index: 1;
 43     }
 44 
 45     .div .buttons span {
 46         flex: 1;
 47         margin-left: 5px;
 48         margin-right: 5px;
 49         height: 20px;
 50         width: 20px;
 51         border-radius: 50%;
 52         text-align: center;
 53         background-color: pink;
 54         cursor: pointer;
 55         color: white
 56     }
 57 
 58     .div .buttons span.on {
 59         background-color: rgb(221, 118, 23);
 60     }
 61 
 62     .div .arrow {
 63         position: absolute;
 64         top: 5%;
 65         bottom: 5%;
 66         color: rgb(182, 189, 182);
 67         padding: 160px 14px;
 68         font-size: 50px;
 69         z-index: 2;
 70         cursor: pointer;
 71 
 72     }
 73 
 74     .div .arrowL {
 75         left: 10px;
 76         display: flex;
 77     }
 78 
 79     .div .arrowR {
 80         right: 10px;
 81         display: flex;
 82     }
 83 
 84     .div .arrow:hover {
 85         background-color: rgba(0, 0, 0, 0.2);
 86     }
 87 
 88     #img1 {
 89         background: red;
 90     }
 91 
 92     #img2 {
 93         background: orange;
 94     }
 95 
 96     #img3 {
 97         background: yellow;
 98     }
 99 
100     #img4 {
101         background: green;
102     }
103 
104     #img5 {
105         background-color: blue;
106     }
107 </style>
108 
109 <body>
110     <div class="div">
111         <div class="box">
112             <div class="wrap" style="left:0">
113                 <img id="img1" src="./picture/1.jpg" alt="">
114                 <img id="img2" src="./picture/2.jpg" alt="">
115                 <img id="img3" src="./picture/3.jpg" alt="">
116                 <img id="img4" src="./picture/4.jpg" alt="">
117                 <img id="img5" src="./picture/5.png" alt="">
118             </div>
119             <div class="buttons">
120                 <span class="on">1</span>
121                 <span>2</span>
122                 <span>3</span>
123                 <span>4</span>
124                 <span>5</span>
125             </div>
126             <a class="arrow arrowL"> < </a>
127             <a class="arrow arrowR"> > </a>
128         </div>
129     </div>
130     <script>
131         // @  获取各dom元素以及一些定义
132         let div = document.querySelector(".div")  //用来处理鼠标悬停
133         let wrap = document.querySelector(".wrap")  //轮播图容器
134         let next = document.querySelector(".arrowR")  //右箭头
135         let prev = document.querySelector(".arrowL") //左箭头
136         let buttons = document.getElementsByTagName("span")//按钮数组
137         next.onclick = function () {
138             nextPic();
139         }
140         prev.onclick = function () {
141             prevPic();
142         }
143         let index = 0;     //当前显示的图片索引（0-4）
144 
145         //@ 图片对应的小按钮
146 
147         // 显示当前图片对应的按钮选中状态
148         function showCurrentButton() {
149             for (let i = 0; i < buttons.length; i++) {
150                 buttons[i].className = "";
151             }
152             buttons[index].className = "on"
153         }
154 
155         for (let i = 0; i < buttons.length; i++) {
156             clickButtons(i);
157         }
158         function clickButtons(i) {
159             buttons[i].onclick = function () {
160                 wrap.style.left = i* (-600) + "px";
161                 index = i;
162                 showCurrentButton();
163             }
164         }
165 
166         // @ 下一张
167         function nextPic() {
168             index++;
169             let newLeft;
170             if (wrap.style.left == "-2400px") {
171                 newLeft = 0;
172                 index = 0
173             } else {
174                 newLeft = parseInt(wrap.style.left) - 600;
175             }
176             wrap.style.left = newLeft + "px"
177             showCurrentButton()
178         }
179         // @ 上一张
180         function prevPic() {
181             index--
182             let newLeft;
183             if (wrap.style.left == "0px") {
184                 newLeft = -2400;
185                 index = 4
186             } else {
187                 newLeft = parseInt(wrap.style.left) + 600;
188             }
189             wrap.style.left = newLeft + "px"
190             showCurrentButton()
191         }
192 
193         // @自动轮播
194         function autoPlay() {
195             timer = setInterval(nextPic, 1000)
196         }
197         autoPlay()
198         // 鼠标悬停
199         div.onmouseenter = function () {
200             clearInterval(timer)
201         }
202         div.onmouseleave = function () {
203             autoPlay()
204         }
205     </script>
206 </body>
207 
208 </html>

 

 

 

这篇关于轮播图的实现的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航