原生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 }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一“技”之长

iOS界面布局之一——使用autoresizing进行动态布局

autoresizing是iOS中传统的界面自动布局方式,通过它,当父视图frame变换时,子视图会自动的做出相应的调整。

812
来自专栏阮一峰的网络日志

Flexbox 布局的最简单表单

弹性布局(Flexbox)逐渐流行,越来越多人使用,因为它写 CSS 布局真是太方便了。

962
来自专栏我分享我快乐

CSS心得宝典

初学者必备 Html属性不能重复使用,但css的属性是后写的替换先写的 子级标签属性会继承父级标签属性 子级标签属性与父级冲突,子级优先 布局级别就是排队级别...

43110
来自专栏前端布道

CSS实现元素居中原理解析

在 CSS 中要设置元素水平垂直居中是一个非常常见的需求了。但就是这样一个从理论上来看似乎实现起来极其简单的,在实践中,它往往难住了很多人。

752
来自专栏Web项目聚集地

CSS布局解决方案(居中布局)

前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又有居中布局、多列布局以及全局布局,今天我们就来总结总结前端干货中的CSS布局...

1092
来自专栏IMWeb前端团队

居中那些事情

居中那点事 最近碰到一些居中的问题需要处理,这里整理下碰到的问题以及一些解决的方案 文本水平居中 text-align:center; 可以知道,让一个元素水平...

22010
来自专栏十月梦想

元素居中的多种实现方式!

优点:只需在子元素child上设置css样式,不用关心父元素的 缺点:兼容性较差,如果需要兼容,更改html样式,改为table样式

672
来自专栏从零开始学 Web 前端

div盒子水平垂直居中方法

这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%)  必须加上

1463
来自专栏CaiRui

CSS

CSS的四种引入方式: 一、行内样式 <div style="background-color: blue;color: brown">cairui</div>...

2056
来自专栏HTML5学堂

前端特效制作 | CSS3圆形风格面包屑导航

HTML5学堂(码匠):前端开发中,导航栏是一个不可或缺的模块。效果酷炫、制作简单必然是开发者的首选,使用CSS3制作的面包屑导航将是广大开发者的一个绝佳选择。...

5976

扫码关注云+社区

领取腾讯云代金券