1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <style> 10 .box{ 11 900px; 12 height: 500px; 13 border:1px solid #000; 14 position:relative; 15 margin:auto; 16 overflow:hidden; 17 18 } 19 .box ul,.box ol{ 20 list-style:none; 21 padding: 0; 22 margin: 0; 23 } 24 .box ul li{ 25 900px; 26 height: 500px; 27 display:none; 28 } 29 .box ul li img{ 30 900px; 31 height: 500px; 32 } 33 .box ol{ 34 120px; 35 position:absolute; 36 left:50%; 37 margin-left:-50px; 38 bottom:20px; 39 height:20px; 40 background:black; 41 opacity:0.5; 42 display:flex; 43 justify-content: space-evenly; 44 padding:10px 0; 45 border-radius:20px; 46 } 47 .box ol li{ 48 20px; 49 height: 20px; 50 border-radius:50%; 51 background:black; 52 border:1px solid #999; 53 cursor: pointer; 54 } 55 .box ol li.current{ 56 background:white; 57 transition: 0.5s; 58 } 59 .box ul li.current{ 60 display:block; 61 transition: 1s; 62 } 63 .box .left,.box .right{ 64 position:absolute; 65 top:50%; 66 30px; 67 height:30px; 68 margin-top:-15px; 69 background:black; 70 opacity: 0.5; 71 text-align:center; 72 line-height: 30px; 73 text-decoration:none; 74 font-weight:bold; 75 color:#fff; 76 } 77 .left{ 78 left:0; 79 } 80 .right{ 81 right: 0; 82 } 83 </style> 84 <body> 85 <div class="box"> 86 <ul> 87 <li class="current"><img src="images/a.jpg" alt=""></li> 88 <li><img src="images/b.jpg" alt=""></li> 89 <li><img src="images/c.jpg" alt=""></li> 90 </ul> 91 <ol> 92 <li class="current"></li> 93 <li></li> 94 <li></li> 95 </ol> 96 <!-- 如需显示小于号，我们必须这样写：< 或 < lt 是less than的首字母缩写,gt 是greater than的首字母缩写 --> 97 <a href="javascript:;" class="left"><</a> 98 <a href="javascript:;" class="right">></a> 99 </div> 100 <script> 101 var ulis = document.querySelectorAll("ul li"); 102 var olis = document.querySelectorAll("ol li"); 103 var box = document.querySelector(".box"); 104 var leftbn = document.querySelector(".left"); 105 var rightbn = document.querySelector(".right"); 106 var timer; 107 var num = 0; 108 box.onmouseover=function(){ 109 clearInterval(timer); 110 } 111 box.onmouseout=function(){ 112 timer = setInterval(right,2000); 113 } 114 leftbn.onclick=left; 115 rightbn.onclick=right; 116 function left(){ 117 num--; 118 if(num<0){ 119 num = ulis.length-1; 120 } 121 move(); 122 } 123 function move(){ 124 for(var i=0;i<olis.length;i++){ 125 olis[i].className = ''; 126 ulis[i].className = ''; 127 } 128 olis[num].className = 'current'; 129 ulis[num].className = 'current'; 130 } 131 132 function right(){ 133 num++; 134 if(num==ulis.length){ 135 num = 0; 136 } 137 move() 138 } 139 timer = setInterval(right,2000); 140 for(var i=0;i<olis.length;i++){ 141 olis[i].index = i; 142 olis[i].onclick=function(){ 143 num = this.index; 144 move(); 145 146 } 147 } 148 </script> 149 </body> 150 </html>
效果:
