<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="">
<style>
.content {
width: 590px;
height: 470px;
margin: 100px 470px;
position: relative;
}
.imglist {
padding-left: 0px;
list-style: none;
width: 590px;
height: 470px;
position: relative;
}
.item {
position: absolute;
width: 100%;
height: 100%;
color: white;
opacity: 1;
transition: all 1s;
}
.item:nth-child(1) {
background-image: url("img/j1.jpg");
background-size: 590px 470px;
}
.item:nth-child(2) {
background-image: url("img/j2.jpg");
background-size: 590px 470px;
}
.item:nth-child(3) {
background-image: url("img/j3.jpg");
background-size: 590px 470px;
}
.item:nth-child(4) {
background-image: url("img/j4.jpg");
background-size: 590px 470px;
}
.item:nth-child(5) {
background-image: url("img/j5.jpg");
background-size: 590px 470px;
}
.item.active {
opacity: 1;
z-index: 10;
}
.btn {
width: 30px;
height: 30px;
position: absolute;
top: 200px;
z-index: 15;
opacity: 50%;
border-radius: 30%;
border: white dashed;
}
#goPre {
left: 0px;
}
#goNext {
right: 0PX
}
.pointlist {
position: absolute;
list-style: none;
margin-left: 30px;
left: 20px;
bottom: 15px;
z-index: 20;
}
.point {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.4);
margin: 0px 4px 0px 0px;
float: left;
border: 2px solid transparent;
background-clip: content-box;
cursor: pointer;
}
.point.active {
background-color: white;
border: 2px solid rgba(255, 255, 255, 0.4);
}
</style>
</head>
<body>
<div class="content">
<ul class="imglist">
<li class="item active"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
<button type="button" class="btn" id="goPre"><</button>
<button type="button" class="btn" id="goNext">></button>
<div class="pointlist">
<li class="point active" data-index="0"><a href="#"/></li>
<li class="point" data-index="1"></li>
<li class="point" data-index="2"></li>
<li class="point" data-index="3"></li>
<li class="point" data-index="4"></li>
</div>
</div>
<script>
//获取以上各个对象
var items = document.getElementsByClassName('item');
var points = document.getElementsByClassName('point');
var goPreBtn = document.getElementById('goPre');
var goNextBtn = document.getElementById('goNext');
//index是每一张图的下标，也可以说是指每一张图
var index = 0;
var time = 0;
//把每一张图的class设置为’item‘，也就是让每一张图都不活跃的方法。
var clearActive = function () {
for (var i = 0; i < items.length; i++) {
items[i].className = 'item';
}
//把每一个点都设置为‘point’，也就是让每一个点的下标都不活跃的方法。
for (var i = 0; i < points.length; i++) {
points[i].className = 'point';
}
}
var goIndex = function () {
//调用清空方法。
clearActive();
//设置当前图片和点为活跃状态。
points[index].className = 'point active';
items[index].className = 'item active';
}
//next方法，跳转到下一页的方法。
var goNext = function () {
if (index < 4) {
index++
} else {
index = 0;
}
//把index传入goindex方法中，使下一张图和点的状态为活跃。
goIndex();
}
//pre方法，跳转到上一页的方法。
var goPre = function () {
if (index === 0) {
index = 4;
} else {
index--;
}
//把index传入goindex方法中，使上一张图和点的状态为活跃。
goIndex();
}
//添加点击事件，跳转到下一张图
goNextBtn.addEventListener('click', function () {
goNext();
time = 0;
})
//添加点击事件，跳转到上一张图
goPreBtn.addEventListener('click', function () {
goPre();
time = 0;
})
for (var i = 0; i < points.length; i++) {
//点的点击事件
points[i].addEventListener('click', function () {
//getAttribute获取每个点的下标值，
var pointIndex = this.getAttribute('data-index');
//把当前下标值赋值给index，在执行goindex方法就可以跳转到指定页面。
index = pointIndex;
goIndex();
time = 0;
})
}
//以上时间time，只要页面跳转就把时间清零。
setInterval(function () {
//每过0.1秒，time+1，过了两秒后，执行next方法，time时间清零。
time++;
if (time === 20) {
goNext();
time = 0;
}
}, 100)
</script>
</body>
</html>
有需要可以拿去修改，改图片到style中修改！
个人之见，勿喷！
更多推荐
轮播图（有注释,有点击上一页,点击下一页）
发布评论