HTML+CSS +JS 轮播图

最新推荐文章于 2024-04-12 15:47:14 发布
weixin_30315905
最新推荐文章于 2024-04-12 15:47:14 发布
阅读量170
点赞数
原文链接：http://www.cnblogs.com/wcx-20151115-hzz/p/10098483.html
版权
  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>轮播图</title>
  6         <style>
  7             #container{
  8                 width: 450px;
  9                 height: 270px;
 10                 margin: 0 auto;
 11                 margin-top: 100px;
 12                 position: relative;
 13                 overflow: hidden;
 14             }
 15             
 16             #pic{
 17                 width: 3150px;
 18                 height: 270px;
 19                 position: absolute;
 20                 z-index: 1;
 21             }
 22             /*图片大小*/
 23             #pic img{
 24                 float: left;
 25                 width: 450px;
 26                 height: 270px;
 27             }
 28             
 29             #pre{
 30                 width: 37px;
 31                 height: 63px;
 32                 background: url(../img/L1.png);
 33                 position: absolute;
 34                 top: 120px;
 35                 left: 5px;
 36                  cursor: pointer;
 37                  z-index: 10;
 38             }
 39             
 40             #pre:hover{
 41                 background: url(../img/L2.png);
 42             }
 43             
 44             #next{
 45                 width: 37px;
 46                 height: 63px;
 47                 background: url(../img/R1.png);
 48                 position: absolute;
 49                 top: 120px;
 50                 right: 5px;
 51                 cursor: pointer;
 52                 z-index: 10;
 53             }
 54             
 55             #next:hover{
 56                 background: url(../img/R2.png);
 57             }
 58             
 59             #circle .first{
 60                 background-color: darkgrey;
 61             }
 62             
 63             #circle{
 64                 position: absolute;
 65                 top: 240px;
 66                 left: 130px;
 67                 z-index: 10;
 68                 height: 40px;
 69                 z-index: 2;
 70             }
 71             
 72             #circle span{
 73                 display: inline-block;
 74                 width: 20px;
 75                 height: 20px;
 76                 border-radius: 10px;
 77                 background-color: white;
 78                 margin-left: 8px;
 79             }
 80         </style>
 81     </head>
 82     <body>
 83         <div id="container">
 84             <div id="pic">
 85                 <img src="img/1.jpg" alt=""/>
 86                 <img src="img/2.jpg" alt=""/>
 87                 <img src="img/3.jpg" alt="3"/>
 88                 <img src="img/4.jpg" alt=""/>
 89                 <img src="img/5.jpg" alt=""/>
 90                 <img src="img/6.jpg" alt=""/>
 91                 <img src="img/7.jpg" alt=""/>
 92             </div>
 93             <div id="pre"></div>
 94             <div id="next"></div>
 95             <div id="circle">
 96                 <span class="first"></span>
 97                 <span></span>
 98                 <span></span>
 99                 <span></span>
100                 <span></span>
101                 <span></span>
102                 <span></span>
103             </div>
104         </div>
105         
106         <script>
107             //索引值：控制全局
108             var index = 0;
109             var pic = document.getElementById("pic");
110             var pre = document.getElementById("pre");
111             var next = document.getElementById("next");
112             
113             ////切换下一张图片
114             function next_pic () {
115                 index++;
116                    if(index == 7){
117                        index = 0;
118                    }
119                    pic.style.left = -450*index + "px";
120                 showCurrentCircle(); 
121             }
122             
123             //切换上一张图片
124             function pre_pic () {
125                 index--;
126                    if(index == -1){
127                        index = 6;
128                    }
129                    pic.style.left = -450*index + "px";
130                    showCurrentCircle(); 
131             }    
132             
133             //点击下一张照片的事件
134             next.onclick = function () {
135                    next_pic();
136                }
137             
138             //点击上一张照片的事件
139             pre.onclick = function () {
140                 pre_pic();
141             }
142             
143             var timer = null;
144             //无限计时器，自动循环播放照片
145             function autoPlay () {
146                 timer = setInterval(function () {
147                     //调用
148                     next_pic();
149                 },2000);
150                }
151             //调用    
152             autoPlay();
153             
154             var container = document.getElementById("container");
155             //鼠标移入图片范围，移除计时器，图片自动轮播停止
156             container.onmouseenter = function () {
157                    clearInterval(timer);
158             }
159             ////鼠标离开图片范围，计时器重启，图片自动轮播
160             container.onmouseleave = function () {
161                 autoPlay();    
162             }
163 
164             var circle = document.getElementsByTagName("span");
165             //下方原点颜色跟随图片切换
166             function showCurrentCircle () {
167                 //清除已经轮播过的圆点类
168                 for(var i = 0; i < circle.length; i++){
169                     circle[i].className = "";
170                     console.log(i)
171                 }
172                 //再将原本的圆点类名赋给当前所轮播到的圆点
173                 circle[index].className = "first";
174             }
175             
176             //let:类似闭包效果，
177             for (let i = 0; i < circle.length; i++){
178                 circle[i].onclick = function () {
179                     pic.style.left = -450*i + "px";
180                        index = i;
181                        showCurrentCircle();
182                 }
183             }
184         </script>
185     </body>
186 </html>