先來看一下效果：
注：展示所用圖片來自 站酷，文末附所需引入的JS封裝函數的鏈接。
CSS部分：
<style>
.box{width: 1000px;height: 300px;margin: 20px auto;position: relative;overflow: hidden;}
.imgbox a{width: 1000px;height: 300px;position: absolute;left:1000px;top:0;}
.imgbox a:nth-child(1){left:0;}
.imgbox img{width: 1000px;height: 300px;}
.btns input{width: 40px;height: 40px;position: absolute;top:130px;border: none;background: rgba(200,200,200,0.5);}
#left{left:0;}
#right{right: 0;}
.list{width: 1000px;height: 30px;position: absolute;left: 0;bottom: 0;display: flex;background: rgba(200,200,200,0.5);}
.list span{flex: 1;line-height: 30px;text-align: center;border-left: solid 1px #ccc;}
.list span.active{background: red;color: #fff;}
</style>
HTML部分：
<body>
<div class="box">
<div class="imgbox">
<a><img src="../img/lunbo01.jpg" alt=""></a>
<a><img src="../img/lunbo02.jpg" alt=""></a>
<a><img src="../img/lunbo03.jpg" alt=""></a>
<a><img src="../img/lunbo04.jpg" alt=""></a>
<a><img src="../img/lunbo05.jpg" alt=""></a>
</div>
<div class="btns">
<input type="button" id="left" value="<<<">
<input type="button" id="right" value=">>>">
</div>
<div class="list">
</div>
</div>
</body>
JS部分：
<script>
// 無論代碼寫的好壞，習慣要好，哈哈哈~~~
// 好習慣就是在動手開始做之前，先來進行一個分析，如下：
// 分析：
// 因爲當前的佈局方式，採取同時控制兩個索引的方式，讓圖片動起來
// 要走的
// 要進來的
// 選擇元素
// 綁定事件
// 計算索引
// 根據索引移動對應的圖片
// list的創建，跟隨程序的執行立即創建
// list內的小方塊要根據圖片的張數創建
// 根據默認索引設置當前項
// 綁定事件（事件委託）
// 點擊時計算要走的和要進來的索引
// 判斷方向
// 再去移動
// 修改索引，爲點前點擊的內容
// 修改當前項
class Banner{
constructor(){
this.left = document.getElementById("left");
this.right = document.getElementById("right");
this.child = document.querySelectorAll(".imgbox a");
this.list = document.querySelector(".list");
this.box = document.querySelector(".box");
this.iNow = 0;
this.iPrev = this.child.length - 1;
}
init(){
var that = this;
this.left.addEventListener("click",function(){
that.changeIndex(1);
})
this.right.addEventListener("click",function(){
that.changeIndex(-1);
})
// L3.事件委託綁定事件
this.list.onclick = function(eve){
var e = eve || window.event;
var tar = e.target || e.srcElement;
if(tar.tagName == "SPAN"){
// L4.觸發事件時，執行改變索引，同時將點前點擊的span傳入
that.listChangeIndex(tar);
}
}
}
changeIndex(direct){
if(direct == 1){
if(this.iNow == 0){
this.iNow = this.child.length-1;
this.iPrev = 0;
}else{
this.iNow--;
this.iPrev = this.iNow + 1;
}
}else{
if(this.iNow == this.child.length-1){
this.iNow = 0;
this.iPrev = this.child.length-1;
}else{
this.iNow++;
this.iPrev = this.iNow - 1;
}
}
this.move(direct);
}
move(direct){
// 根據左右按鈕傳入的狀態：左1，右-1
// 利用乘法
// 改變不同按鈕的方向問題
this.child[this.iPrev].style.left = 0;
move(this.child[this.iPrev],{left:this.child[0].offsetWidth * direct});
this.child[this.iNow].style.left = -this.child[0].offsetWidth * direct + "px";
move(this.child[this.iNow],{left:0});
this.setActive();
}
createList(){
// L1.創建對應圖片數量的span，同時編號
var str = ``;
for(var i=0;i<this.child.length;i++){
str += `<span index='${i}'>${i+1}</span>`;
}
this.list.innerHTML = str;
// L2.設置默認的當前項
this.setActive();
}
setActive(){
for(var i=0;i<this.list.children.length;i++){
this.list.children[i].className = "";
}
this.list.children[this.iNow].className = "active";
}
listChangeIndex(tar){
// L5.確定要走的索引和要進來的索引
// this.iNow 要走的
// 拿到點擊的span的編號 要進來的
var index = parseInt(tar.getAttribute("index"));
// console.log(this.iNow, index);
// L6-1.判斷方向
if(index > this.iNow){
// L7-1.向左運動
this.listMove(1,index);
}
// L6-2.判斷方向
if(index < this.iNow){
// L7-2.向右運動
this.listMove(-1,index);
}
// L8.將當前點擊的索引設置成下次要走的索引
this.iNow = index;
// L9.根據修改之後的索引，設置當前項
this.setActive();
}
listMove(direct,index){
// this.iNow走
// 從哪走，走到哪
this.child[this.iNow].style.left = 0;
move(this.child[this.iNow],{left:-1000 * direct})
// index進來
// 從哪進來，進到哪
this.child[index].style.left = 1000 * direct + "px";
move(this.child[index],{left:0});
}
autoPlay(){
var t = setInterval(()=>{
this.changeIndex(-1);
},2000)
this.box.onmouseover = function(){
clearInterval(t);
}
var that = this;
this.box.onmouseout = function(){
t = setInterval(()=>{
that.changeIndex(-1);
},2000)
}
}
}
var b = new Banner();
b.init();
b.createList();
b.autoPlay();
</script>
- 實現上述效果，還需引入一個運動的封裝函數，見：封裝運動函數
如無法實現上述效果 或 存在疑問，歡迎留言或私聊我哦~~~