不廢話，直接上代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>輪播</title>
<style>
* {margin: 0;padding: 0}
#box{width: 850px;height: 600px;margin: 100px auto;position: relative;overflow: hidden;}
#box img{width: 850px;height: 600px;vertical-align: top}
ul {width: 1000%;position: absolute;list-style: none;left:0;top: 0;}
#box li{float: left;}
ol {position: absolute;height: 20px;right: 20px;bottom: 20px;text-align: center;padding: 5px;}
ol li{display: inline-block;width: 20px;height: 20px;line-height: 20px;background-color: #fff;margin: 5px;cursor: pointer;border-radius: 10px;}
ol .ac{background-color: red;}
#arr span{width: 40px;height: 40px;background: #fff;position: absolute;left: 0;top: 50%;margin-top: -20px;cursor: pointer;line-height: 40px;text-align: center;font-weight: bold;font-family: '黑體';font-size: 30px;color: #000;opacity: 0.5;border: 1px solid #fff;}
#arr #right {right: 0;left: auto;}
</style>
</head>
<body>
<div id="box">
<ul>
<li><a href="#"><img src="img/1.jpg" alt=""></a></li>
<li><a href="#"><img src="img/2.jpg" alt=""></a></li>
<li><a href="#"><img src="img/3.jpg" alt=""></a></li>
<li><a href="#"><img src="img/4.jpg" alt=""></a></li>
<li><a href="#"><img src="img/5.jpg" alt=""></a></li>
// 注意！多加一張圖1
<li><a href="#"><img src="img/1.jpg" alt=""></a></li>
</ul>
<ol class="bar">
<li class="ac">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<div id="arr">
<span id="left"> <</span>
<span id="right">></span>
</div>
</div>
<script>
//獲取各元素
var box=document.getElementById("box");
var ul=box.children[0];
var li=ul.children;
// console.log(li.length); //6
var liBtn=box.children[1].children;
var moveWidth=box.offsetWidth;
var left=document.getElementById("left");
var right=document.getElementById("right");
var pic=0; // 記錄圖片索引
// 給所有按鈕綁定事件
for(let i=0;i<liBtn.length;i++){
// 爲按鈕註冊mouseover事件
liBtn[i].onclick=function () {
for(let j=0;j<liBtn.length;j++){liBtn[j].className="";}// 先清除所有按鈕的樣式
this.className="ac"; // 爲點擊按鈕改樣式
pic=i;
picMove(ul,-pic*moveWidth);
}
}
// 自動播放
var timer=setInterval(picChange,3000);
// 鼠標進入暫停退出繼續
box.onmouseenter=()=>{clearInterval(timer);};
box.onmouseleave=()=>{timer=setInterval(picChange,3000);};
// 左右按鈕實現點擊切換圖片功能
right.onclick=picChange;
left.onclick=()=>{
// 如果點擊第一張圖,沒有平移效果,所以改成第6張圖
if (pic==0){
pic=li.length-1;
ul.style.left=-pic*moveWidth+"px";
}
pic--;
picMove(ul,-pic*moveWidth);
for (let i = 0; i < liBtn.length; i++) {liBtn[i].className = "";}
// 當前的pic索引對應的按鈕設置顏色
liBtn[pic].className = "ac";
}
// 判斷切換到哪一張
function picChange(){
// console.log(ul); // 6
// console.log(li.length); // 6
console.log(pic);
//如果pic的值是5,頁面顯示的是第六個圖片,但和第一張一樣
//再次點擊按鈕,應該跳第二個圖片
if (pic == li.length-1) {
ul.style.left = 0+"px";//把ul的位置還原成開始的默認位置,從第6個圖,跳轉到第1個圖
pic = 0;// pic變成第一張圖索引
}
pic++;// 立刻設置pic加1,那麼此時用戶就會看到第二個圖片了
picMove(ul, -pic*moveWidth);//pic從0的值加1之後,pic的值是1,然後ul移動出去一個圖片
//如果pic==5說明,此時顯示第6個圖(內容是第一張圖片),第一個小按鈕有顏色,
console.log(pic);
if (pic == li.length-1) {
liBtn[liBtn.length-1].className = ""; // 清除第五個按鈕顏色
liBtn[0].className="ac"; // 第一個按鈕顏色設置上
} else {
for (var i = 0; i < liBtn.length; i++) {liBtn[i].className="";}
liBtn[pic].className="ac"; // 清除所有的小按鈕的背景顏色
}
}
//移動過程：任意一個元素移動到指定的目標位置
function picMove(item, target) {
clearInterval(item.timer);
//定時器的id值存儲到對象的一個屬性中
item.timer = setInterval(()=>{
var _left = item.offsetLeft; // 獲取元素的當前的位置,數字類型
var step = 50; // 每次移動的距離
step = _left < target ? step : -step;
_left += step; // 當前移動到位置
if (Math.abs(_left - target) > Math.abs(step)) {
item.style.left = _left + "px";
} else {
clearInterval(item.timer); // 清理定時器
item.style.left = target + "px"; // 直接到達目標
}
}, 10);
}
</script>
</body>
</html>
效果圖：
