javascript实现图片轮播简单效果

本文实例为大家分享了javascript实现图片轮播简单效果的具体代码，供大家参考，具体内容如下
这里是css样式

1. * {
2. margin: 0;
3.     padding: 0;
4.    }
6.    ul,
7.    li {
8.     list-style: none;
9.    }
11.    img {
12.     display: block;
13.     /*vertical-align: middle;*/
14.    }
16.    a {
17.     text-decoration: none;
18.    }
20.    input {
21.     outline: none;
22.    }
24.    .clearFix:after {
25.     content: "";
26.     display: table;
27.     clear: both;
28.    }
30.    #box {
31.     position: relative;
32.     width: 500px;
33.     height: 300px;
34.     margin: 50px auto;
35.     overflow: hidden;
36.    }
38.    #box .imglist {
39.     position: absolute;
40.     left: -500px;
41.     top: 0;
42.     width: 3500px;
43.     height: 300px;
44.    }
46.    #box .imglist li {
47.     float: left;
48.     width: 500px;
49.     height: 300px;
50.    }
52.    #box .imglist li img {
53.     width: 500px;
54.     height: 300px;
55.    }
57.    #box span {
58.     position: absolute;
59.     top: 50%;
60.     transform: translateY(-50%);
61.     width: 25px;
62.     height: 50px;
63.     background-color: rgba(200, 200, 200, 07);
64.     font-size: 20px;
65.     text-align: center;
66.     line-height: 50px;
67.     color: white;
68.     opacity: 0;
69.     transition: opacity 1s;
70.    }
72.    #box .left {
73.     left: 0;
74.    }
76.    #box .right {
77.     right: 0;
78.    }
80.    #box .btnlist {
81.     position: absolute;
82.     left: 50%;
83.     transform: translateX(-50%);
84.     bottom: 10px;
85.     overflow: hidden;
86.    }
88.    #box .btnlist li {
89.     float: left;
90.     width: 10px;
91.     height: 10px;
92.     margin-right: 10px;
93.     border-radius: 50%;
94.     background-color: gray;
95.    }
97.   #box .btnlist li.current {
98.   background-color: red;
99. }

复制代码

这里是body里的div，我的图片都是宽500px的，你也可以改其尺寸的，不过相应的js代码也要更改

1. <div id="box">
2. <ul class="imglist">
3.   <li></li>
4.   <li></li>
5.   <li><img src="images/yaya2.jpg" /></li>
6.   <li><img src="images/yaya3.jpg" /></li>
7.   <li><img src="images/yaya4.jpg" /></li>
8.   <li></li>
9.   <li></li>
10.    </ul>
12.    <span class="left"> < </span>
13.    <span class="right"> > </span>
15.    <ul class="btnlist">
16.     <li class="current"></li>
17.     <li></li>
18.     <li></li>
19.     <li></li>
20.     <li></li>
21. </ul>
22. </div>

复制代码

这里是js代码,代码大部分地方都做了注释

1. // 元素对象
2. var left = document.querySelector(".left");
3. var right = document.querySelector(".right");
4. var imglist = document.querySelector(".imglist");
5. var box = document.querySelector("#box");
6. var dots = document.querySelectorAll(".btnlist li");
8. // 变量区
9. var imgWidth = 500; //图片的宽度
10. var time = 500; //切换一张图片耗费的时间
11. var steps = 50; //步数
12. var interval = 10; //定时任务的时间间隔
13. var current_red = 0;
14. // isMoving变量用于判断当前是否正在切图中
15. var isMoving = false;
16. // 自动轮播定时任务的id值
17. var autoId;
19.    // 鼠标移入时显示左右箭头，移出时隐藏左右箭头
20.    box.addEventListener("mouseenter", function (e) {
21.     left.style.opacity = 1;
22.     right.style.opacity = 1;
23.     // 鼠标移入到box时停止轮播
24.     clearInterval(autoId);
25.    });
26.    box.addEventListener("mouseleave", function (e) {
27.     left.style.opacity = 0;
28.     right.style.opacity = 0;
29.     // 鼠标移出box时开启自动轮播
30.     autoMove();
31.    });
32.    // 对左右箭头设置点击事件
33.    function move(e, direction) {
34.     // isMoving为true时表示正在切换图片，不能再执行move函数的代码
35.     if (isMoving) {
36.      return;
37.     }
38.     isMoving = true;
39.     // 获取当前imglist的位置
40.     var start_x = imglist.offsetLeft;
41.     var end_x;
42.     // 判断direction的数据类型
43.     if (typeof direction === "number") {
44.      end_x = direction;
45.      var delta_x = end_x - start_x;
46.     } else {
47.      // 通过点击的箭头确定图片移动的距离
48.      var delta_x = direction === "left" ? imgWidth : -imgWidth;
49.      // 计算要移动到的位置
50.      end_x = start_x + delta_x;
51.     }
52.     // 计算每一步移动的距离
53.     var step_dis = delta_x / steps;
54.     var next_inter_id = setInterval(function () {
55.      var current_x = imglist.offsetLeft;
56.      current_x += step_dis;
57.      imglist.style.left = current_x + "px";
58.      // 条件成立表示完成了此次图片的切换，清除定时器
59.      if (current_x === end_x) {
60.       // current_x等于0表示此时显示的是位置上的第一张图片(第一个li)，我们要切换到倒数第二张去。
61.       if (current_x === 0) {
62.        imglist.style.left = -2500 + "px";
63.        // current_x等于-3000表示此时显示的是位置上的最后一张(第七个li),我们要切换到第二张图片去。
64.       } else if (current_x === -3000) {
65.        imglist.style.left = -500 + "px";
66.       }
67.       clearInterval(next_inter_id);
68.       // 图片切换完成时切换小圆点,传入的参数是此时imglist的left属性的值
69.       changeDots(current_x);
70.       // 图片切换完成，可以继续点击箭头或小圆点切图了
71.       isMoving = false;
72.      }
73.     }, interval);
74.    }
75.    right.addEventListener("click", function (e) {
76.     move(e, "right");
77.    });
78.    left.addEventListener("click", function (e) {
79.     move(e, "left");
80.    });
82.    /*
83.     无限循环的实现思路：在首尾各添加一张图片，首部添加第五张图片，尾部添加第一张图片
84.     1、改变imglist的宽度
85.     2、改变imglist元素中left的值
86.     3、在添加两张图片后，轮播到第一张和最后一张时实现切换。
87.    */
89.    // 小圆点的切换
90.    function changeDots(current_x) {
91.     /*
92.      current_x可能的取值：0 -500 -1000 -1500 -2000 -2500 -3000
93.      除以-500：   0  1   2   3   4  5  6
94.      整体减去1：   -1  0   1   2   3  4  5
95.     */
96.     var index = current_x / -500 - 1;
97.     index = index === -1 ? 4 : index === 5 ? 0 : index;
98.     // console.log(index);
99.     // 把上一个小圆点红色背景清除
100.     dots[current_red].className = "";
101.     // 把当前切换到的图片对应的小圆点添加红色背景
102.     dots[index].className = "current";
103.     // 将当前红色背景的小圆点的索引赋值给current_red变量
104.     current_red = index;
105.    }
107.    // 小圆点的点击事件
108.    for (var i = 0; i < dots.length; i++) {
109.     dots[i].setAttribute("data-index", i);
110.     dots[i].onclick = function (e) {
111.      var index = this.dataset.index;
112.      // 计算图片要切换到的目标位置
113.      var target_pos = -imgWidth * (Number(index) + 1);
114.      // 利用现有的move函数完成点击小圆点图片的切换
115.      move(e, target_pos);
116.     };
117.    }
119.    // 实现自动轮播
120.    function autoMove() {
121.     autoId = setInterval(function () {
122.      move("right");
123.     }, 3000);
124.   }
125. autoMove();

复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中国红客联盟。