1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style type="text/css"> 8 * { 9 margin: 0px; 10 padding: 0px; 11 list-style: none; 12 } 13 14 #box { 15 position: absolute; 16 left: 0px; 17 right: 0px; 18 bottom: 0px; 19 top: 0px; 20 margin: auto; 21 width: 500px; 22 height: 300px; 23 } 24 25 ul>li { 26 width: 100%; 27 height: 100%; 28 position: absolute; 29 top: 0px; 30 left: 0px; 31 font-size: 40px; 32 color: #fff; 33 text-align: center; 34 line-height: 300px; 35 display: none; 36 } 37 38 .ul li:nth-of-type(1) { 39 background: red; 40 } 41 42 .ul li:nth-of-type(2) { 43 background: green; 44 } 45 46 .ul li:nth-of-type(3) { 47 background: blue; 48 } 49 50 .ul li:nth-of-type(4) { 51 background: #ff6700; 52 } 53 54 span { 55 font-size: 50px; 56 font-weight: bold; 57 display: inline-block; 58 width: 40px; 59 color: #fff; 60 background: #b0b0b0; 61 height: 60px; 62 line-height: 60px; 63 text-align: center; 64 cursor: pointer; 65 display: none; 66 } 67 68 #box:hover span { 69 display: block; 70 } 71 72 .left { 73 position: absolute; 74 left: 0px; 75 top: 120px; 76 } 77 78 .right { 79 position: absolute; 80 right: 0px; 81 top: 120px; 82 } 83 84 ol { 85 text-align: center; 86 position: absolute; 87 bottom: 20px; 88 width: 100%; 89 } 90 91 ol>li { 92 display: inline-block; 93 width: 15px; 94 height: 15px; 95 background: gray; 96 border-radius: 100%; 97 margin: 5px; 98 cursor: pointer; 99 } 100 .show { 101 display: block; 102 } 103 .change { 104 background-color: #fff; 105 } 106 </style> 107 </head> 108 <body> 109 <div id="box"> 110 <ul class="ul"> 111 <li>第一张</li> 112 <li>第二张</li> 113 <li>第三张</li> 114 <li>第四张</li> 115 </ul> 116 <ol> 117 <li class="point"></li> 118 <li class="point"></li> 119 <li class="point"></li> 120 <li class="point"></li> 121 </ol> 122 <span class="left"><</span> 123 <span class="right">></span> 124 </div> 125 <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> 126 <script type="text/javascript"> 127 var box = document.querySelector("#box"); 128 var ul = document.querySelector(".ul"); 129 var lis = ul.getElementsByTagName("li"); 130 var right = document.querySelector(".right"); 131 var left = document.querySelector(".left"); 132 var point = document.querySelectorAll(".point"); 133 134 lis[0].className = "show"; 135 point[0].className = "change"; 136 var i = 0, timer; 137 138 //自动播放 139 140 Auto(); 141 function Auto() { 142 if(timer){ 143 clearInterval(timer); 144 } 145 function show() { 146 i++; 147 if(i >= lis.length) { 148 i = 0 149 } 150 clear(i); 151 } 152 timer = setInterval(show, 1500); 153 } 154 155 //单击左边 156 left.onclick = function() { 157 i--; 158 if(i < 0) { 159 i = lis.length - 1; 160 } 161 console.log(i); 162 clear(i); 163 } 164 165 //单击右边 166 right.onclick = function() { 167 i++; 168 if(i >= lis.length) { 169 i = 0; 170 } 171 clear(i); 172 } 173 //重置属性 174 function clear(t) { 175 for(var j = 0; j < lis.length; j++) { 176 lis[j].className = ""; 177 point[j].className = ""; 178 } 179 lis[t].className = "show"; 180 point[t].className = "change"; 181 } 182 //单击小圆圈播放 (注意函数的闭包问题 ) 183 for(var k = 0; k < point.length; k++) { 184 point[k].index = k; //闭包问题的解决，自定义属性 185 point[k].onclick = function() { 186 i = this.index; 187 clear(i); 188 } 189 } 190 191 box.onmouseenter = function(){ 192 clearInterval(timer); 193 } 194 box.onmouseleave = function(){ 195 setTimeout(Auto, 1000); 196 }