效果：
代碼：
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>輪播圖</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="wrapper">
<ul class="img">
<li><img src="cat1.jpg" alt=""></li>
<li><img src="cat2.jpg" alt=""></li>
<li><img src="cat3.jpg" alt=""></li>
<li><img src="cat4.jpg" alt=""></li>
<li><img src="cat1.jpg" alt=""></li>
</ul>
<div class="sliderIndex">
<i class="active"></i>
<i></i>
<i></i>
<i></i>
</div>
<div class="btn leftBtn">
<span><</span>
</div>
<div class="btn rightBtn">
<span>></span>
</div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
index.css:
* {
padding: 0px;
margin: 0px;
list-style: none;
}
/* 圖片 */
.wrapper {
position: relative;
margin: 100px auto;
width: 400px;
height: 200px;
overflow: hidden;
}
.wrapper ul {
position: relative;
left: 0px;
top: 0px;
width: 2000px;
height: 200px;
}
.wrapper ul li {
float: left;
width: 400px;
height: 200px;
}
.wrapper ul li img {
width: 400px;
height: 200px;
}
/* 圓點 */
.wrapper .sliderIndex {
position: absolute;
bottom: 10px;
left: 50%;
width: 80px;
height: 20px;
margin-left: -40px;
border-radius: 10px;
text-align: center;
background: rgba(255, 255, 255, 0.3);
}
.wrapper .sliderIndex i {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
margin: 6px 4px;
cursor: pointer;
}
.wrapper .sliderIndex i.active {
background: #666;
}
/* 按鈕 */
.wrapper .btn {
position: absolute;
box-sizing: border-box;
width: 30px;
height: 30px;
padding-top: 4px;
background: rgba(0, 0, 0, 0.3);
color: #fff;
cursor: pointer;
display: none;
}
.wrapper:hover .btn {
display: block;
}
.wrapper .btn:hover {
background: rgba(0, 0, 0, 0.5);
}
.wrapper .btn.leftBtn {
left: -15px;
top: 50%;
margin-top: -15px;
padding-left: 15px;
border-radius: 50%;
}
.wrapper .btn.rightBtn {
left: 385px;
top: 50%;
margin-top: -15px;
padding-left: 3px;
border-radius: 50%;
}
index.js:
var img = document.getElementsByClassName("img")[0];
var leftBtn = document.getElementsByClassName("leftBtn")[0];
var rightBtn = document.getElementsByClassName("rightBtn")[0];
var sliderIndex = document.getElementsByClassName("sliderIndex")[0];
var slider = sliderIndex.getElementsByTagName("i");
var sliderLen = slider.length;
var lock = true;
// 點擊事件
leftBtn.addEventListener("click", function () {
nextPic("left");
}, false);
rightBtn.addEventListener("click", function () {
nextPic("right");
}, false);
for (var i = 0; i < sliderLen; i++) {
(function (i) {
slider[i].addEventListener("click", function () {
nextPic("", i);
}, false);
}(i))
}
// 定時自動切換
var autoTimer = setInterval(function () {
nextPic("right");
}, 5000);
// 重新計時
function Restart () {
clearInterval(autoTimer);
autoTimer = setInterval(function () {
nextPic("right");
}, 5000);
}
// 判斷下一個圓點及圖片
function nextPic (dir, next) {
if (lock) {
lock = false;
Restart();
var now = img.offsetLeft;
var nextSlider;
if (dir) {
var count = dir === "right" ? 1 : -1;
next = -now / 400 + count;
if (next === 4) {
nextSlider = 0;
} else if (next === -1) {
nextSlider = next = 3;
now = -1600;
} else {
nextSlider = next;
}
} else {
nextSlider = next;
dir = now > next * -400 ? "eight" : "left";
// if (now > next * -400) {
// dir = "right";
// } else {
// dir = "left";
// }
}
cutSlider(nextSlider);
cutPic(dir, now, next * -400);
}
}
// 切換圓點
function cutSlider (next) {
for (var i = 0; i < sliderLen; i++) {
slider[i].className = next === i ? "active" : "";
// if (next === i) {
// slider[i].className = "active";
// } else {
// slider[i].className = "";
// }
}
}
// 切換圖片
function cutPic (dir, now, next) {
if (dir === "left" && now === 0) {
now = -1600;
img.style.left = "-1600px";
}
speed = (next - now) / 4;
var timer = setInterval(function () {
now += speed
img.style.left = now + "px";
if (img.offsetLeft === next) {
clearInterval(timer);
lock = true;
}
if (now === -1600) {
img.style.left = "0px";
}
}, 100);
}