原生js实现图片轮播效果

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

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 }

 

posted @ 2017-11-12 18:44  why_not_try  阅读(291)  评论(0)  编辑  收藏  举报