JS实现图片轮播跑马灯

本文实例为大家分享了JS实现图片轮播跑马灯的具体代码，供大家参考，具体内容如下
实现原理：

1、准备一个展示区域的盒子，设置宽高；
2、准备一个存放所有图片的盒子，将所有图片依次放入，设置溢出隐藏
一、HTML布局

1. <div class="wrapper">
2. <div id="container"><!--图片展示区域盒子-->
3. <ul id="imglist"><!--将所有图片并列展示盒子-->
4.   <li>
5.    
6.   </li>
7.   <li>
8.    
9.   </li>
10.   <li>
11.    
12.   </li>
13.   <li>
14.    
15.   </li>
16. </ul>
17. <ul id="point">
18.   <li class="selected"></li>
19.   <li></li>
20.   <li></li>
21.   <li></li>
22. </ul>
23. </div>
24. </div>

复制代码

二、CSS样式

1. .wrapper{
2. position: relative;
3. overflow: hidden;
4. width: 100%;
5. height: 870px;
6. }
7. #container{
8.   width: 1920px;
9.   height: 870px;
10.   position: absolute;
11.   top: 50%;
12.   left: 50%;
13.   overflow: hidden;
14.   transform: translate(-50%,-50%);
15.   -webkit-transform: translate(-50%,-50%);
16.   -moz-transform: translate(-50%,-50%);
17.   -ms-transform: translate(-50%,-50%);
18.   -o-transform: translate(-50%,-50%);
19.   background-color: #aa201c;
20. }
21. #imglist{
22.   width: 7680px;
23.   height: 870px;
24.   list-style-type: none;
25.   position: absolute;
26.   top: 0;
27.   left: 0;
28.   z-index: 1;
29. }
30. #imlist>li{
31.   width: 1920px;
32.   height: 870px;
33.   float: left;
34.   overflow: hidden;
35. }
36. #point{
37.   list-style-type: none;
38.   position: absolute;
39.   bottom: 5px;
40.   left: 50%;
41.   /* right: 0; */
42.   /* margin: auto; */
43.   width: 100%;
44.   height: 29px;
45.   line-height: 29px;
46.   z-index: 10;
47. }
48. #point>.selected{
49.   background-color: #aa201c;
50. }
51. #point>li{
52.   width: 16px;
53.   height: 16px;
54.   float: left;
55.   background-color: #c5c8ce;
56.   border-radius: 100%;
57.   margin-right: 10px;
58.   -webkit-border-radius: 100%;
59. }

复制代码

三、JS代码

1. var wrap = document.getElementById("container");
2. var inner = document.getElementById("imglist");
3. var spanList = document.getElementById("point").getElementsByTagName("li");
4. var left = document.getElementById("left");
5. var right = document.getElementById("right");
7. var clickFlag = true;//设置左右切换标记位防止连续按
8. var time//主要用来设置自动滑动的计时器
9. var index = 0;//记录每次滑动图片的下标
10. var Distance = wrap.offsetWidth;//获取展示区的宽度，即每张图片的宽度
11. //定义图片滑动的函数
12. function AutoGo() {
13.   var start = inner.offsetLeft;//获取移动块当前的left的开始坐标
14.   var end = index * Distance * (-1);//获取移动块移动结束的坐标。
15.   //计算公式即当移动到第三张图片时，图片下标为2乘以图片的宽度就是块的left值。
16.   var change = end - start;//偏移量
18.   var timer;//用计时器为图片添加动画效果
19.   var t = 0;
20.   var maxT = 30;
21.   clear();//先把按钮状态清除,再让对应按钮改变状态
22.   if (index == spanList.length) {
23.     spanList[0].className = "selected";
24.   } else {
25.     spanList[index].className = "selected";
26.   }
27.   clearInterval(timer);//开启计时器前先把之前的清
28.   timer = setInterval(function () {
29.     t++;
30.     if (t >= maxT) {//当图片到达终点停止计时器
31.       clearInterval(timer);
32.       clickFlag = true;//当图片到达终点才能切换
33.     }
34.     inner.style.left = change / maxT * t + start + "px";//每个17毫秒让块移动
35.     if (index == spanList.length && t >= maxT) {
36.       inner.style.left = 0;
37.       index = 0;
38.       //当图片到最后一张时把它瞬间切换回第一张，由于都同一张图片不会影响效果
39.     }
40.   }, 17);
41. }
42. //编写图片向右滑动的函数
43. function forward() {
44.   index++;
45.   //当图片下标到最后一张把小标换0
46.   if (index > spanList.length) {
47.     index = 0;
48.   }
49.   AutoGo();
50. }
51. //编写图片向左滑动函数
52. function backward() {
53.   index--;
54.   //当图片下标到第一张让它返回到倒数第二张，
55.   //left值要变到最后一张才不影响过渡效果
56.   if (index < 0) {
57.     index = spanList.length - 1;
58.     inner.style.left = (index + 1) * Distance * (-1) + "px";
59.   }
60.   AutoGo();
61. }
63. //开启图片自动向右滑动的计时器
64. time = setInterval(forward, 3000);
66. //设置鼠标悬停动画停止
67. wrap.onmouseover = function () {
68.   clearInterval(time);
69. }
70. wrap.onmouseout = function () {
71.   time = setInterval(forward, 3000);
72. }
73. //遍历每个按钮让其切换到对应图片
74. for (var i = 0; i < spanList.length; i++) {
75.   spanList[i].onclick = function () {
76.     index = this.innerText - 1;
77.     AutoGo();
78.   }
79. }
80. //清除页面所有按钮状态颜色
81. function clear() {
82.   for (var i = 0; i < spanList.length; i++) {
83.     spanList[i].className = "";
84.   }
85. }

复制代码

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