用原生JavaScript实现类似淘宝首页的轮播图
-
效果图如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.wrap {
width: 600px;
height: 400px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.wrap-img {
width: 4200px;
height: 400px;
position: absolute;
/* transition: left 0.5s ease-in; */
}
.wrap-img img {
width: 600px;
height: 400px;
float: left;
}
.wrap-index {
position: absolute;
;
cursor: pointer;
width: 100px;
bottom: 10px;
left: 0;
right: 0;
margin: 0 auto;
}
.wrap-index li {
width: 10px;
height: 10px;
list-style: none;
border: 1px solid #aaa;
box-sizing: border-box;
border-radius: 10px;
display: inline-block;
}
.wrap-index li.active {
background-color: #fff;
}
.arrow span {
width: 40px;
height: 40px;
}
.arrow .left,
.arrow .right {
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
font-size: 40px;
font-weight: bolder;
line-height: 1;
cursor: pointer;
}
.arrow .left {
left: 10px;
}
.arrow .right {
right: 10px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="wrap-img" style="left:-600px">
<img src="../images/role5.jpg" alt="">
<img src="../images/role1.jpg" alt="">
<img src="../images/role2.jpg" alt="">
<img src="../images/role3.jpg" alt="">
<img src="../images/role4.jpg" alt="">
<img src="../images/role5.jpg" alt="">
<img src="../images/role1.jpg" alt="">
</div>
<ul class="wrap-index">
<li class="active" id="1"></li>
<li class="" id="2"></li>
<li class="" id="3"></li>
<li class="" id="4"></li>
<li class="" id="5"></li>
</ul>
<div class="arrow">
<span class="left"><</span>
<span class="right">></span>
</div>
</div>
<script>
var container = document.getElementsByClassName('wrap')[0];
var images = document.getElementsByClassName('wrap-img')[0]; //滚动部分
var left = document.getElementsByClassName('left')[0]; //左箭头
var right = document.getElementsByClassName('right')[0]; //右箭头
//var wrapIndex = document.getElementsByClassName('wrap-index')[0];
var liIndex = document.getElementsByClassName('wrap-index')[0].children; //小圆点
var index = 0; //小圆点的下标
var timer = null; //每一张图片移动一小段距离的定时器
var flag = true; //控制滑动距离
function moveImg(dis) {
var time = 300; //一张运动总时间
var eachTime = 10; //一段运行时间
var eachDis = dis / (time / eachTime); //每一段运行的距离
var newdis = parseInt(images.style.left) + dis; //新位置
flag = false;
function eachMove() {
if (dis > 0 && newdis > parseInt(images.style.left) || dis < 0 && newdis < parseInt(images.style
.left)) {
// console.log("执行了第一个");
images.style.left = parseInt(images.style.left) + eachDis + 'px';
} else {
flag = true;
// console.log("执行了第二个");
clearInterval(timer);
images.style.left = newdis + 'px';
if (newdis == 0) {
images.style.left = -3000 + 'px';
}
if (newdis == -3600) {
images.style.left = -600 + 'px';
}
}
}
timer = setInterval(eachMove, 50); //每一张图片移动一小段距离的定时器
}
left.onclick = function () {
if (!flag) return;
moveImg(600);
if (index == 0) {
index = 4;
} else {
index--;
}
moveCricle();
}
right.onclick = function () {
if (!flag) return;
moveImg(-600);
if (index == 4) {
index = 0;
} else {
index++;
}
moveCricle();
}
//把每有active样式的li去掉样式，给选中的li加active样式
function moveCricle() {
for (var i = 0; i < liIndex.length; i++) {
if (liIndex[i].className == 'active') {
liIndex[i].className = '';
break;
}
}
liIndex[index].className = 'active';
}
//给每个li绑定点击事件
for (var i = 0; i < liIndex.length; i++) {
liIndex[i].value = i;
(function () {
liIndex[i].onclick = function () {
if (this.value == index) return;
var offset = (this.value - index) * -600;
moveImg(offset);
index = this.value;
moveCricle();
}
})()
}
//定时器
var globaltimer = setInterval(right.onclick, 1500);
container.onmouseenter = function () {
clearInterval(globaltimer);
}
container.onmouseleave = function () {
globaltimer = setInterval(right.onclick, 1000);
}
</script>
</body>
</html>
