js简易轮播图 JavaScript实现简易轮播图最全代码解析（ES5）
飒尔 人气:0想了解JavaScript实现简易轮播图最全代码解析（ES5）的相关内容吗，飒尔在本文为您仔细讲解js简易轮播图的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：js,轮播图，下面大家一起来学习吧。
全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ES5轮播图</title>
<style>
* {padding: 0;margin: 0;}
#wrapper {
position: relative;
margin: 50px auto;
padding: 0;
width: 1000px;
height: 300px;
}
#wrapper .content {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
#wrapper>.content>.imgs {
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 0;
width: 6000px;
/*多留出一张图片的宽度！*/
list-style: none;
}
#wrapper>.content>.imgs li {
float: left;
margin: 0;
padding: 0;
width: 1000px;
height: 300px;
}
#wrapper>.content>.imgs>li img {
width: 100%;
height: 100%;
}
#wrapper>.content>.dots {
width: 163px;
position: absolute;
right: 0;
left: 0;
margin: auto;
bottom: 10px;
list-style: none;
}
#wrapper>.content>.dots li {
float: left;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 50%;
margin-left: 10px;
cursor: pointer;
}
li.active {
background-color: white;
}
li.quiet {
background-color: #5a5a58;
}
.btns {
display: none;
}
.btns span {
position: absolute;
width: 25px;
height: 40px;
top: 50%;
margin-top: -20px;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: Simsun;
font-size: 30px;
border: 1px solid #fff;
opacity: 0.5;
cursor: pointer;
color: #fff;
background: black;
}
.btns .left {
left: 5px;
}
.btns .right {
left: 100%;
margin-left: -32px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="content">
<ul class="imgs">
<li><img src="img/s1.jpg" /></li>
<li><img src="img/s2.jpg" /></li>
<li><img src="img/s3.jpg" /></li>
<li><img src="img/s4.jpg" /></li>
<li><img src="img/s5.jpg" /></li>
</ul>
<ul class='dots'></ul>
</div>
<div class="btns">
<span class="left"><</span>
<span class="right">></span>
</div>
</div>
</body>
</html>
<script>
var wrapper = document.getElementById("wrapper");
var imgs = document.getElementsByClassName("imgs")[0];
var dots = document.getElementsByClassName("dots")[0];
var btns = document.getElementsByClassName("btns")[0];
var dotss = dots.children;
var len = imgs.children.length; //图片张数
var width = wrapper.offsetWidth; //每张图片的宽度
var rate = 15; //一张图片的切换速度， 单位为px
var times = 1; //切换速度的倍率
var timer = null; //初始化一个定时器
var imgSub = 0; //当前显示的图片下标
var dotSub = 0; //当前显示图片的小圆点下标
var temp;
// 创建一个文档片段，此时还没有插入到 DOM 结构中
const frag = document.createDocumentFragment()
// 根据图片数量添加相应的小圆点到文档片段中
for (let i = 0; i < len; i++) {
const dot = document.createElement("li");
dot.className = 'quiet';
// 先插入文档片段中
frag.appendChild(dot);
}
// 将小圆点片段统一插入到 DOM 结构中
dots.appendChild(frag)
// 第一个小圆点高亮显示
dots.children[0].className = "active";
// 滑动函数
function Roll(distance) { //参数distance：滚动的目标点（必为图片宽度的倍数）
clearInterval(imgs.timer); //每次运行该函数必须清除之前的定时器！
//判断图片移动的方向
var speed = imgs.offsetLeft < distance ? rate : (0 - rate);
//设置定时器，每隔10毫秒，调用一次该匿名函数
imgs.timer = setInterval(function() {
//每一次调用滚动到的地方 (速度为 speed px/10 ms)
imgs.style.left = imgs.offsetLeft + speed + "px";
//距目标点剩余的px值
var leave = distance - imgs.offsetLeft;
/*接近目标点时的处理，滚动接近目标时直接到达， 避免rate值设置不当时不能完整显示图片*/
if (Math.abs(leave) <= Math.abs(speed)) {
clearInterval(imgs.timer);
imgs.style.left = distance + "px";
}
}, 10);
}
/*克隆第一个li到列表末*/
imgs.appendChild(imgs.children[0].cloneNode(true));
function autoRun() {
imgSub++;
dotSub++;
if (imgSub > len) { //滚动完克隆项后
imgs.style.left = 0; //改变left至真正的第一项处
imgSub = 1; //从第二张开始显示
}
// 调用滚动函数，参数为该下标的滚动距离
Roll(-imgSub * width);
// 如果圆点下标已滚动到最后，则将下标重置为0
if (dotSub > len - 1) { //判断是否到了最后一个圆点
dotSub = 0;
}
// 循环修改所有圆点默认样式
for (var i = 0; i < len; i++) {
dotss[i].className = "quiet";
}
// 给当前滚动到的圆点添加高亮样式
dotss[dotSub].className = "active";
}
// 创建定时器，开始自动滚动
timer = setInterval(autoRun,2000);
// 循环添加小圆点的触发事件
for (var i = 0; i < len; i++) {
dotss[i].index = i;
dotss[i].onmouseover = function() {
for (var j = 0; j < len; j++) {
dotss[j].className = "quiet";
}
this.className = "active";
temp = dotSub;
imgSub = dotSub = this.index;
times = Math.abs(this.index - temp); //距离上个小圆点的距离
rate = rate * times; //根据距离改变切换速率
Roll(-this.index * width);
rate = 15;
}
}
// 添加事件：鼠标移动到wrapper上，左右切换按钮显示
wrapper.onmouseover = function() {
clearInterval(timer);
btns.style.display = 'block';
}
// 添加事件：鼠标移出wrapper，左右切换按钮隐藏
wrapper.onmouseout = function() {
timer = setInterval(autoRun,2000);
btns.style.display = 'none';
}
// 点击上一张按钮 触发事件
btns.children[0].onclick = function() {
imgSub--;
dotSub--;
if (imgSub < 0) { //滚动完第一项后
imgs.style.left = -len * width + "px"; //改变left至克隆的第一项处
imgSub = dotSub = len - 1;
}
Roll(-imgSub * width);
if (dotSub < 0) {
dotSub = len - 1;
}
for (var i = 0; i < len; i++) {
dotss[i].className = "quiet";
}
dotss[dotSub].className = "active";
}
// 点击下一张按钮 触发事件
btns.children[1].onclick = autoRun;
</script>
图片：
加载全部内容