话不多说，上干货，注意外部js文件，别引用错了，外部js文件在下面会给出
<!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>轮播图</title>
<style>
*{
padding:0px;
margin: 0px;
list-style:none;
}
.start{
position:relative;
height: 250px;
width: 400px;
margin:100px auto 0px;
border:2px solid black;
overflow: hidden;
}
.start .start1{
height:250px;
width:2000px;
position: absolute;
left:0px;
top:0px;
}
.start .start1 li{
float:left;
height:250px;
width:400px;
}
.start .start1 li img{
width:100%;
height: 100%;
}
.start .btn {
position: absolute;
top: 50%;
margin-top: -20px;
width: 40px;
height: 40px;
color: #fff;
background-color: #000;
text-align: center;
line-height: 40px;
opacity: 0.1;
cursor: pointer;
}
.start:hover .btn {
opacity: 0.7;
}
.start .leftbtn {
left: 15px;
}
.start .rightbtn {
right: 15px;
}
.start .end {
position: absolute;
width: 100%;
bottom: 15px;
text-align: center;
}
.start .end span {
display: inline-block;
width: 15px;
height: 6px;
background-color: #ccc;
margin-right: 10px;
cursor: pointer;
}
.start .end .active {
background-color: #f40;
}
</style>
</head>
<body>
<div class="start">
<ul class="start1">
<li>
<img src="./cat1.jpg"/>
</li>
<li>
<img src="./cat2.jpg"/>
</li>
<li>
<img src="./cat3.jpg"/>
</li>
<li>
<img src="./cat4.jpg"/> **图片的话自己可以修改哈，还有位置。**
</li>
<li>
<img src="./cat1.jpg"/>
</li>
</ul>
<div class="btn leftbtn"><</div>
<div class="btn rightbtn">></div>
<div class="end">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
**这个外部引用的js文件下面会给出**
<script src='./move.js'></script>
<script>
var timer = null;
var sliderPage = document.getElementsByClassName('start1')[0];
var moveWidth = sliderPage.children[0].offsetWidth;
var num = sliderPage.children.length - 1;
var leftBtn = document.getElementsByClassName('leftbtn')[0];
var rightBtn = document.getElementsByClassName('rightbtn')[0];
var oSpanArray = document.getElementsByClassName('end')[0].getElementsByTagName('span');
var lock = true;
var index = 0;
leftBtn.onclick = function () {
autoMove('right->left');
}
rightBtn.onclick = function () {
autoMove('left->right');
}
**这个部分是按钮**
for (var i = 0; i < oSpanArray.length; i++) {
(function (myIndex) {
oSpanArray[i].onclick = function () {
lock = false;
clearTimeout(timer);
index = myIndex;
startMove(sliderPage, {left: - index * moveWidth}, function () {
lock = true;
timer = setTimeout(autoMove, 1500);
changeIndex(index);
})
}
})(i)
}
**上面这部分是让索引可以点击跳转图片**
function autoMove (direction) {
**加lock是为了让你点击按钮快速的时候不出错**
if (lock) {
lock = false;
clearTimeout(timer);
**默认方向为向左**
if (!direction || direction == 'left->right') {
index++;
**startMove（）是一个外部的js文件的函数下面会给大家**
startMove(sliderPage, {left: sliderPage.offsetLeft