原生js实现图片轮播效果
原生js实现图片轮播效果
用户1149564
发布于 2018-01-11 17:32:26
发布于 2018-01-11 17:32:26
思路：设置父容器（一定宽度，一定高度，相对定位，子容器超出部分进行隐藏），子容器图片并排（浮动，绝对定位，每次点击进行相应的左或右偏移量）
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"><</a>
26 <a href="javascript:void(0)" class="arrow arrow_right">></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 }本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-11-12 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读