1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>轮播图</title>
6 </head>
7 <style>
8 *{
9 margin:0px;
10 padding:0px;
11 }
12
13 li{
14 list-style: none; /*取消li默认的前缀*/
15 }
16
17 img{
18 display: block; /*解决图片之间3px的问题*/
19 }
20
21 /*用一个容器包裹起来*/
22 #container{
23 position: relative;
24 margin: 0 auto;
25 margin-top: 130px;
26 width: 750px;
27 height: 352px;
28 border: 1px solid #ccc;
29 }
30
31 /*隐藏掉容器所有的图片*/
32 #container>ul>li{
33 position:absolute;
34 display: none;
35
36 }
37
38 /*显示容器中的图片active属性的那张*/
39 #container>ul>li.active{
40 display: block;
41 }
42
43 #buttons{
44 position: absolute;
45 width: 180px;
46 height: 20px;
47 bottom: 20px;
48 left: 50%;
49 margin-left: -90px;
50 border-radius: 20px;
51 background-color:rgba(255, 255, 255, 0.2);
52 }
53
54 /*弹性盒子*/
55 #buttons>ul{
56 width: 100%;
57 height: 100%;
58 display: flex;
59 align-items: center; /*垂直方向居中*/
60 justify-content:space-around; /*水平方向居中*/
61 }
62
63 #buttons>ul>li{
64 width: 20px;
65 height: 20px;
66 border-radius: 50%;
67 text-align: center;
68 background-color: #FFF;
69 }
70
71 #buttons>ul>li.active_butto{
72 background-color: #DB192A;
73 }
74 #container>.arrow{
75 position: absolute;
76 width: 30px;
77 height: 60px;
78 top: 50%;
79 margin-top: -30px;
80 font-size: 30px;
81 line-height: 60px;
82 text-align: center;
83 background-color: rgba(0, 0, 0, 0.1);
84 user-select: none; /*禁止选中文字(多次点击箭头会选中箭头)*/
85 }
86 #container>.arrow:hover{
87 background: rgba(0, 0, 0, 0.5);
88 cursor: pointer;
89 }
90 #container>#left{
91 left: 0px;
92 }
93 #container>#right{
94 right: 0px;
95 }
96
97 </style>
98 <body>
99 <div id="container">
100 <!-- 图片 -->
101 <ul>
102 <li class="active"><img src="./1.jpg" alt="1"></li>
103 <li><img src="./2.jpg" alt="2"></li>
104 <li><img src="./3.jpg" alt="3"></li>
105 <li><img src="./4.jpg" alt="4"></li>
106 <li><img src="./5.jpg" alt="5"></li>
107 </ul>
108 <!-- 圆点 -->
109 <div id="buttons">
110 <ul>
111 <li class="active_butto">1</li>
112 <li>2</li>
113 <li>3</li>
114 <li>4</li>
115 <li>5</li>
116 </ul>
117 </div>
118 <!-- 箭头 -->
119 <span id="left" class="arrow"><</span>
120 <span id="right" class="arrow">></span>
121 </div>
122 <script>
123 var container = document.getElementById("container"); /* 获取元素*/
124 var bList = document.getElementById("buttons");
125 var left = document.getElementById("left");
126 var right = document.getElementById("right");
127 var lis = container.children[0].children; /* .children查找该元素的所有子类,返回的是类数组*/
128 var blis = bList.children[0].children;
129 var len = lis.length;
130 var index = 0;
131 var timer;
132 var next = function() {
133 lis[index].removeAttribute("class"); /*移除属性*/
134 blis[index].removeAttribute("class"); /*移除属性*/
135 index++; /*设置标志*/
136 if(index == len){
137 index = 0;
138 }
139 lis[index].setAttribute("class", "active"); /*添加属性*/
140 blis[index].setAttribute("class", "active_butto"); /*添加属性*/
141 }
142 var autoPlay = function() {
143 timer = setInterval(function() {
144 next();
145 },2000);
146 }
147 autoPlay();
148 container.onmouseenter = function() {
149 clearInterval(timer);
150 }
151 container.onmouseleave = function() {
152 autoPlay();
153 }
154 for(var i = 0; i < blis.length; i++) {
155 blis[i].onmouseover = (function(i) { /*使用闭包解决函数循环先执行导致i一直是数组的length-1的问题*/
156 return function() {
157 lis[index].removeAttribute("class"); /*移除属性*/
158 blis[index].removeAttribute("class");
159 index = i;
160 lis[index].setAttribute("class", "active"); /*添加属性*/
161 blis[index].setAttribute("class", "active_butto");
162 };
163 })(i);
164 }
165 left.onclick = function() {
166 lis[index].removeAttribute("class"); /*移除属性*/
167 blis[index].removeAttribute("class");
168 index--;
169 if(index < 0){
170 index = blis.length - 1;
171 }
172 lis[index].setAttribute("class", "active"); /*添加属性*/
173 blis[index].setAttribute("class", "active_butto"); /*添加属性*/
174 }
175 right.onclick = function() {
176 next();
177 }
178 </script>
179 </body>
180 </html>
原文地址：https://www.cnblogs.com/XTheodore/p/12154442.html
时间： 2024-08-28 17:54:51