功能完整的js原生轮播图

html:

<div class="container">
<div class="list">
<img src="page3.png" alt="1">
<img src="page1.png" alt="2">
<img src="page2.png" alt="3">
<img src="page3.png" alt="4">
<img src="page1.png" alt="5">
</div>
<input class="prev btn" type="button" value="<">
<input class="next btn" type="button" value=">">
<div class="poins">
<span class="poin"></span>
<span class="poin"></span>
<span class="poin"></span>
</div>
</div>

css:
* {
padding: 0;
margin: 0;
text-decoration: none;
font-size: 0;
}

.container {
position: relative;
width: 100%;
height: 570px;
/*border:1px solid red;*/
overflow: hidden;
}

.list {
position: absolute;
z-index: 1;
width: 500%;
height: 570px;
left: -1920px;
top: 0;
cursor: pointer;
/*transition: all 1s;*/
}

.list img {
float: left;
width: 20%;
height: 570px;
}

.btn {
position: absolute;
top: 50%;
transform: translate(0, -50%);
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 30px;
color: red;
background-color: rgba(0, 0, 0, .6);
z-index: 1000;

cursor: pointer;
outline: none;
}

.prev {
left: 150px;
}

.next {
right: 150px;
}

.poins {
position: absolute;
left: 50%;
transform: translate(-50%, 0);

top: 520px;
z-index: 3;
}

.poin {
margin-left: 10px;
margin-right: 10px;
display: inline-block;
width: 50px;
height: 5px;
border-radius: 25%;
background-color: lightgrey;
cursor: pointer;
}

.active {
background-color: orange;
}js:

var index = 1;
var poins = document.querySelectorAll('.poin');

init();
var timer;
//自动切换函数
function play() {
timer = setInterval(function () {
index = index == 3 ? 1 : index + 1;//调整索引
animation(-1920);//利用动画函数进行位移
showPoin();//切换原点颜色
}, 2000);
}
play();
//动画函数
function animation(offset, callback) {
var list = document.querySelector('.list');
var newLeft = parseInt(getComputedStyle(list)['left']) + offset;
var time = 400;
var interval = 10;
var speed = offset / (time / interval);
function start() {
done = true;
var cur = parseInt(getComputedStyle(list)['left']);
// console.log(speed, cur, newLeft);
if ((speed < 0 && parseInt(getComputedStyle(list)['left']) > newLeft) || (speed > 0 && parseInt(getComputedStyle(list)['left']) < newLeft)) {
list.style.left = parseInt(getComputedStyle(list)['left']) + speed + 'px';
setTimeout(start, interval);
}
else {
done = false;
list.style.left = newLeft + 'px';
if (newLeft > -1920) {
list.style.left = -5760 + 'px';
}
if (newLeft < -5760) {
list.style.left = -1920 + 'px'
}
callback && callback();
}
}
start();

}
var next = document.querySelector('.next');
var prev = document.querySelector('.prev');
//左右按钮
next.addEventListener('click', throote(function () {
index = index === 3 ? 1 : index + 1;//调整索引
clearInterval(timer);//清楚计时器
animation(-1920);//利用动画函数进行位移
play();//重设计时器
showPoin();//小圆点根据当前索引切换颜色
}, 500))
prev.addEventListener('click', throote(function () {
index = index === 1 ? 3 : index - 1
clearInterval(timer);
animation(1920);
play();
showPoin();
}, 500))
//防抖函数
function throote(fn, time) {
var start = Date.now();
return function () {
var end = Date.now
4000
();
if (end - start < time) {
return;
}
fn.apply(null, arguments);
start = end;
}
}
//鼠标移入自动切换停止
//移出继续自动切换
var list = document.querySelector('.list');
list.addEventListener('mouseover', function () {
clearInterval(timer);
})
list.addEventListener('mouseout', function () {
play();
})
//小圆点

//初始化
function init() {
for (var i = 0; i < poins.length; i++) {
poins[i].index = i + 1;
}
poins[index - 1].className = 'poin active';

}
//圆点颜色切换
function showPoin() {
for (var i = 0; i < poins.length; i++) {
console.log(poins[i].className);
if (/active/g.test(poins[i].className)) {
poins[i].className = poins[i].className.replace(/active/g, '');
break;
}
}
poins[index - 1].className = 'poin active';
}
//圆点点击事件
poins.forEach(function (item) {
console.log(item);
item.addEventListener('click', function () {
var offset = (this.index - index) * -1920;
animation(offset);
index = this.index;
showPoin();
})
item.addEventListener('mouseover', function () {
clearInterval(timer);
})
item.addEventListener('mouseout', function () {
play();
})
})