原生js实现图片轮播效果

时间 2019-11-09

原文原文链接

思路：设置父容器（必定宽度，必定高度，相对定位，子容器超出部分进行隐藏），子容器图片并排（浮动，绝对定位，每次点击进行相应的左或右偏移量）

1.html:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>Carousel figure</title>
 5     <meta charset="utf-8">
 6     <!-- 浏览器标签页显示图标 -->
 7     <link rel="icon" type="image/x-icon" href="./images/1.jpg">
 8     <link rel="stylesheet" type="text/css" href="1.css">       
 9 </head>
10 <body>
11     <!-- 构建container父容器 -->
12     <div class="container">
13         <!-- 图片部分,style部分设置便于js中改变偏移量，从而实现图片轮播-->
14         <div class="pic" style="left: 0px;">
15             <!-- 图片部分，建议均加上alt，利于seo -->
16             <img src="./images/1.jpg" alt="1">
17             <img src="./images/2.jpg" alt="2">
18             <img src="./images/3.jpg" alt="3">
19             <img src="./images/4.jpg" alt="4">
20             <img src="./images/5.jpg" alt="5">
21             <img src="./images/6.jpg" alt="6">
22         </div>
23         
24         <!-- 箭头部分，实现下一张，上一张效果 -->
25         <a href="javascript:void(0)" class="arrow arrow_left">&lt;</a>
26         <a href="javascript:void(0)" class="arrow arrow_right">&gt;</a>
27         
28         <!-- 当前图片id显示 -->
29         <div class="point">
30             <span class="on">1</span>
31             <span>2</span>
32             <span>3</span>
33             <span>4</span>
34             <span>5</span>
35             <span>6</span>
36         </div>
37     </div>
38     
39     <!-- html body部分加载完成，最后调用js,进行操做；不然没法有效操做 -->
40     <script type="text/javascript" src="1.js"></script>
41 </body>
42 </html>

1.css:

 1 /* body部分清一下外边距与内边距，不建议*（可能影响效率），主流大网站均未采用*进行清边距 */
 2 body{
 3  margin: 0;
 4  padding: 0;
 5 }
 6 a{
 7  text-decoration: none;
 8  color: green;
 9 }
10 a:visited{
11  color: siver;
12 }
13 a:hover{
14  color: gold;
15 }
16 
17 .container{
18     /* container采用相对定位relative，便于子容器进行绝对定位absolute */
19  position: relative;
20 
21     /* 左右居中对齐 */
22  margin: 0 auto;
23 
24     /* 每张图片的宽度高度均为320px, */
25  width: 320px;
26  height: 320px;
27     /* 图片超出部分隐藏 */
28  overflow: hidden;
29     /* border: 1px solid */
30     /* 设置阴影：水平阴影偏离0，垂直阴影偏移0，模糊距离10px，颜色 */
31  box-shadow: 0 0 10px orange;
32 }
33 .pic{
34  position: absolute;
35     /* 6张图片进行排放，故宽度为1920px */
36  width: 1920px;
37  height: 320px;
38 }
39 .pic img{
40     /* 设置左浮动，使6张图片排成一排 */
41  float: left;
42  width: 320px;
43  height: 320px;
44 }
45 .arrow{
46  display: block;
47 
48  border-radius: 50%;
49     /* 采用字符实体，故设置字体使用font-size */
50  font-size: 60px;
51  默认隐藏箭头， 52  display: none;
53 }
54 /* 当悬浮在container区域显示箭头 */
55 .container:hover .arrow{
56  display: block;
57 }
58 /* 当悬浮在arrow区域显示箭头 */
59 .container .arrow:hover{
60  background-color: rgba(0, 0, 0, 0.2);
61 }
62 .arrow_left{
63  position: absolute;
64  left: 30px;
65  top: 40%;
66  text-align: center;
67  width: 80px;
68  height: 80px;
69 }
70 .arrow_right{
71  position: absolute;
72  right: 30px;
73  top: 40%;
74  text-align: center;
75  width: 80px;
76  height: 80px;
77 }
78 .point{
79  position: absolute;
80  margin: 280px auto 0 80px;
81 }
82 .point span{
83  display: inline-block;
84  width: 30px;
85  height: 30px;
86  border-radius: 50%;
87  background-color: orange;
88  text-align: center;
89  cursor: pointer;
90 }
91 .point span.on{
92  background-color: red;
93 }
94 .point span:active{
95  background-color: gold;
96 }

1.js:

 1 // 获取pic组第一个
 2 var pic = document.getElementsByClassName('pic')[0];  3 // 获取arrow_left
 4 var arrow_left = document.getElementsByClassName('arrow_left')[0];  5 // 获取arrow_right
 6 var arrow_right = document.getElementsByClassName('arrow_right')[0];  7 // 获取span组
 8 var points=document.getElementsByTagName('span');  9 var index=0; 10 
11 // 点击右箭头，下一张图片
12 arrow_right.onclick = function() { 13  next_pic(); 14 } 15 // 点击左箭头，上一张图片
16 arrow_left.onclick = function() { 17  prev_pic(); 18 } 19 
20 // 函数实现下一张浏览效果
21 function next_pic() { 22     // 最后一张，下一张变为第一张（left值为0）
23     if (parseInt(pic.style.left) === -1600) { 24         pic.style.left = 0 + "px"; 25     } else { 26         // 下一张
27         var pos = parseInt(pic.style.left) - 320; 28         pic.style.left = pos + 'px'; 29  } 30     index++; 31     if(index>5){ 32         index=0; 33  } 34  showPoint(); 35 } 36 
37 function prev_pic() { 38     if (parseInt(pic.style.left) === 0) { 39         pic.style.left = -1600 + "px"; 40     } else { 41         var pos = parseInt(pic.style.left) + 320; 42         pic.style.left = pos + 'px'; 43  } 44     index--; 45     if(index<0){ 46         index=5; 47  } 48  showPoint(); 49 } 50 
51 var timer = null; 52 
53 // 自动图片轮播，设置1s间隔
54 function autoPlay() { 55     // timer=setInterval(function(){
56     // next_pic();
57     // },1000);
58     timer = setInterval(next_pic, 1000); 59 } 60 autoPlay(); 61 
62 var container = document.getElementsByClassName('container')[0]; 63 // 鼠标移动到container区域，暂停自动播放
64 container.onmouseenter = function() { 65  clearInterval(timer); 66 } 67 // 鼠标离开container区域，自动播放
68 container.onmouseleave = function() { 69  autoPlay(); 70 } 71 
72 // 实现点击相应的小按钮图片跳转到相应图片功能
73 for (var i = 0; i < points.length; i++) { 74     (function(i){ 75         points[i].onclick=function (){ 76             //0~0,1~-320...5~-1600
77             pic.style.left=-320*i +"px"; 78  }; 79         index=i; 80         //没法点击point，使其变色
81  showPoint(); 82  } 83  )(i); 84 } 85 
86 // 实现相应图片对应相应小按钮功能
87 function showPoint(){ 88     for(var i=0;i<points.length;i++){ 89         points[i].className=""; 90  } 91     points[index].className="on"; 92 }