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>
