JS实现图片轮播跑马灯

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

实现原理：

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

一、HTML布局

<div class="wrapper">
<div id="container"><!--图片展示区域盒子-->
? <ul id="imglist"><!--将所有图片并列展示盒子-->
? ? ?<li>
? ? ? ? <img src="./img/banner.jpg" alt="暂无图片">
? ? ?</li>
? ? ?<li>
? ? ? ?<img src="./img/banner0.jpg" alt="暂无图片">
? ? ?</li>
? ? ?<li>
? ? ? ? <img src="./img/banner.jpg" alt="暂无图片">
? ? ?</li>
? ? ?<li>
? ? ? ? <img src="./img/banner0.jpg" alt="暂无图片">
? ? ?</li>
? </ul>
? <ul id="point">
? ? <li class="selected"></li>
? ? <li></li>
? ? <li></li>
? ? <li></li>
? </ul>
</div>
</div>

二、CSS样式

.wrapper{
? position: relative;
? overflow: hidden;
? width: 100%;
? height: 870px;
}
#container{
? ? width: 1920px;
? ? height: 870px;
? ? position: absolute;
? ? top: 50%;
? ? left: 50%;
? ? overflow: hidden;
? ? transform: translate(-50%,-50%);
? ? -webkit-transform: translate(-50%,-50%);
? ? -moz-transform: translate(-50%,-50%);
? ? -ms-transform: translate(-50%,-50%);
? ? -o-transform: translate(-50%,-50%);
? ? background-color: #aa201c;
}
#imglist{
? ? width: 7680px;
? ? height: 870px;
? ? list-style-type: none;
? ? position: absolute;
? ? top: 0;
? ? left: 0;
? ? z-index: 1;
}
#imglist>li{
? ? width: 1920px;
? ? height: 870px;
? ? float: left;
? ? overflow: hidden;
}
#point{
? ? list-style-type: none;
? ? position: absolute;
? ? bottom: 5px;
? ? left: 50%;
? ? /* right: 0; */
? ? /* margin: auto; */
? ? width: 100%;
? ? height: 29px;
? ? line-height: 29px;
? ? z-index: 10;
}
#point>.selected{
? ? background-color: #aa201c;
}
#point>li{
? ? width: 16px;
? ? height: 16px;
? ? float: left;
? ? background-color: #c5c8ce;
? ? border-radius: 100%;
? ? margin-right: 10px;
? ? -webkit-border-radius: 100%;
}

三、JS代码

var wrap = document.getElementById("container");
var inner = document.getElementById("imglist");
var spanList = document.getElementById("point").getElementsByTagName("li");
var left = document.getElementById("left");
var right = document.getElementById("right");

var clickFlag = true;//设置左右切换标记位防止连续按
var time//主要用来设置自动滑动的计时器
var index = 0;//记录每次滑动图片的下标
var Distance = wrap.offsetWidth;//获取展示区的宽度，即每张图片的宽度
//定义图片滑动的函数
function AutoGo() {
? ? var start = inner.offsetLeft;//获取移动块当前的left的开始坐标
? ? var end = index * Distance * (-1);//获取移动块移动结束的坐标。
? ? //计算公式即当移动到第三张图片时，图片下标为2乘以图片的宽度就是块的left值。
? ? var change = end - start;//偏移量

? ? var timer;//用计时器为图片添加动画效果
? ? var t = 0;
? ? var maxT = 30;
? ? clear();//先把按钮状态清除,再让对应按钮改变状态
? ? if (index == spanList.length) {
? ? ? ? spanList[0].className = "selected";
? ? } else {
? ? ? ? spanList[index].className = "selected";
? ? }
? ? clearInterval(timer);//开启计时器前先把之前的清
? ? timer = setInterval(function () {
? ? ? ? t++;
? ? ? ? if (t >= maxT) {//当图片到达终点停止计时器
? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? clickFlag = true;//当图片到达终点才能切换
? ? ? ? }
? ? ? ? inner.style.left = change / maxT * t + start + "px";//每个17毫秒让块移动
? ? ? ? if (index == spanList.length && t >= maxT) {
? ? ? ? ? ? inner.style.left = 0;
? ? ? ? ? ? index = 0;
? ? ? ? ? ? //当图片到最后一张时把它瞬间切换回第一张，由于都同一张图片不会影响效果
? ? ? ? }
? ? }, 17);
}
//编写图片向右滑动的函数
function forward() {
? ? index++;
? ? //当图片下标到最后一张把小标换0
? ? if (index > spanList.length) {
? ? ? ? index = 0;
? ? }
? ? AutoGo();
}
//编写图片向左滑动函数
function backward() {
? ? index--;
? ? //当图片下标到第一张让它返回到倒数第二张，
? ? //left值要变到最后一张才不影响过渡效果
? ? if (index < 0) {
? ? ? ? index = spanList.length - 1;
? ? ? ? inner.style.left = (index + 1) * Distance * (-1) + "px";
? ? }
? ? AutoGo();
}

//开启图片自动向右滑动的计时器
time = setInterval(forward, 3000);

//设置鼠标悬停动画停止
wrap.onmouseover = function () {
? ? clearInterval(time);
}
wrap.onmouseout = function () {
? ? time = setInterval(forward, 3000);
}
//遍历每个按钮让其切换到对应图片
for (var i = 0; i < spanList.length; i++) {
? ? spanList[i].onclick = function () {
? ? ? ? index = this.innerText - 1;
? ? ? ? AutoGo();
? ? }
}
//清除页面所有按钮状态颜色
function clear() {
? ? for (var i = 0; i < spanList.length; i++) {
? ? ? ? spanList[i].className = "";
? ? }
}

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

查看更多关于JS实现图片轮播跑马灯的详细内容...