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 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 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 100%; 57 height: 100%; 58 display: flex; 59 align-items: center; /*垂直方向居中*/ 60 justify-content:space-around; /*水平方向居中*/ 61 } 62 63 #buttons>ul>li{ 64 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 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>