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语句可以拿到想要的数

版权声明：本文为Aaron-wang原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/Aaron-wang/p/6160532.html