原生js轮播图完整代码(css+html+js)
1 <style> 2 *{ 3 padding: 0; 4 margin: 0; 5 } 6 .container{ 7 width: 600px; 8 height: 320px; 9 box-shadow: 0px 0px 33px 11px #25dbc7; 10 margin-top: 90px; 11 margin-left: 300px; 12 } 13 .picShow{ 14 width: 600px; 15 height: 370px; 16 overflow: hidden; 17 position: relative; 18 } 19 .picShow img{ 20 display: block; 21 float: left; 22 } 23 #pic{ 24 width: 2400px; 25 } 26 #pic>img{ 27 width: 600px; 28 } 29 .picShow>img{ 30 position: absolute; 31 top:150px; 32 opacity: 0.7; 33 cursor: pointer; 34 } 35 .picShow>img:nth-child(2){ 36 left:0; 37 } 38 .picShow>img:nth-child(3){ 39 right:0; 40 } 41 #list{ 42 margin-left: 246px; 43 } 44 #list li{ 45 list-style: none; 46 float: left; 47 } 48 #list a{ 49 display: block; 50 width: 20px; 51 height: 20px; 52 font-size: 20px; 53 text-align: center; 54 text-decoration: none; 55 color: #000; 56 border-radius: 50%; 57 border: 1px solid #ccc; 58 background-color: #1270d8; 59 opacity: 0.5; 60 margin-left: 5px; 61 } 62 #list .active{ 63 background-color: red; 64 } 65 </style> 66 </head> 67 <body> 68 <div class="container"> 69 <div class="picShow"> 70 <div id="pic"> 71 <img src="images/1.jpg" alt=""> 72 <img src="images/2.jpg" alt=""> 73 <img src="images/3.jpg" alt=""> 74 <img src="images/4.jpg" alt=""> 75 </div> 76 <img id="prev" src="images/slider-prev.png" alt=""> 77 <img id="next" src="images/slider-next.png" alt=""> 78 <ul id="list"> 79 <li><a class="active" href="#"></a></li> 80 <li><a href="#"></a></li> 81 <li><a href="#"></a></li> 82 <li><a href="#"></a></li> 83 </ul> 84 </div> 85 </div> 86 <script> 87 var num = 0; 88 function G(id){ 89 return document.getElementById(id) 90 } 91 var arrA = G("list").getElementsByTagName('a') 92 G("next").onclick = function(){ 93 if(num<3){ 94 num = num + 1; 95 }else{ 96 num = 0; 97 } 98 console.log(num) 99 var ml = num * -600 + "px"; 100 G("pic").style.marginLeft = ml; 101 for(var i = 0;i < arrA.length;i++){ 102 arrA[i].style.backgroundColor = "#1270d8"; 103 } 104 arrA[num].style.backgroundColor = "red"; 105 } 106 G("prev").onclick = function(){ 107 if(num>0){ 108 num = num - 1; 109 }else{ 110 num = 3; 111 } 112 console.log(num); 113 var ml1 = num * -600 + "px"; 114 G("pic").style.marginLeft = ml1; 115 for(var i = 0;i < arrA.length;i++){ 116 arrA[i].style.backgroundColor = "#1270d8"; 117 } 118 arrA[num].style.backgroundColor = "red"; 119 } 120 for(var i = 0;i < arrA.length;i++){ 121 arrA[i].index = i; 122 arrA[i].onclick = function(){ 123 var ind = this.index; 124 num = ind; 125 var ml3 = num * -600 + "px"; 126 G("pic").style.marginLeft = ml3; 127 for(var i = 0;i < arrA.length;i++){ 128 arrA[i].style.backgroundColor = "#1270d8"; 129 } 130 arrA[num].style.backgroundColor = "red"; 131 } 132 } 133 function lunbo(){ 134 if(num<3){ 135 num+=1; 136 }else{ 137 num=0; 138 } 139 var ml4 = num * -600 + "px"; 140 G("pic").style.marginLeft = ml4; 141 console.log(ml4) 142 for(var i = 0;i < arrA.length;i++){ 143 arrA[i].style.backgroundColor = "#1270d8"; 144 } 145 arrA[num].style.backgroundColor = "red"; 146 } 147 var stop = setInterval(lunbo,2000); 148 G("pic").onmouseenter = function(){ 149 clearInterval(stop) 150 } 151 G("pic").onmouseleave = function(){ 152 stop = setInterval(lunbo,2000) 153 } 154 </script>
思路：布局首先写一个一张图片宽度的盒子，然后里面套一个盒子，盒子里面放上图片，两边左右切换的图标可以定位上去，然后说一下js代码的思路
先看一下需要拿到什么数，然后根据规律定义一个变量num=0,用if语句可以拿到想要的数
