在這里我們運用面向對象的方法來書寫編程：
簡易輪播圖
首先
// OOA:分析：
// 輪播圖：點擊左右按鈕切換圖片
// 1.選擇元素
// 2.綁定點擊事件
// 3.計算索引
// 4.根據索引，顯示圖片
// OOD：設計
// function Banner(){
// // 1.選擇元素
// // 2.綁定點擊事件
// this.init()
// }
// Banner.prototype.init = function(){
// // 綁定事件...
// // 3.計算索引
// this.changeIndex()
// }
// Banner.prototype.changeIndex = function(){
// // 計算索引
// // 4.根據索引，顯示圖片
// this.display()
// }
// Banner.prototype.display = function(){
// // 顯示圖片
// }
<!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>Document</title>
<style>
.banner{width:1000px;height:300px;margin: 20px auto;position: relative;overflow: hidden;}
/* .imgbox{} */
.imgbox img{width: 1000px;height:300px;position: absolute;left:0;top:0;overflow: hidden}
.imgbox img:nth-child(1){z-index: 1}
/* .imgbox a img{width: 1000px;height: 300px} */
.btns input{position: absolute;top:130px;width:40px;height:40px;border: none;background: rgba(200,200,200,0.5);z-index: 9999999;}
#left{left:0}
#right{right:0}
</style>
</head>
<body>
<div class="banner">
<div class="imgbox">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
</div>
<div class="btns">
<input type="button" id="left" value="<<<">
<input type="button" id="right" value=">>>">
</div>
</div>
</body>
<script src="../move.js"></script>
<script>
function Banner(){
// 1.選擇元素
this.imgs = document.querySelector(".imgbox").children;
this.left = document.querySelector("#left");
this.right = document.querySelector("#right");
// 自定義的默認顯示的圖片：索引
this.index = 0;
// 為了顯示圖片設置的層級
this.i = 2;
// 2.綁定點擊事件
this.init()
}
Banner.prototype.init = function(){
var that = this;
// 綁定事件...
this.right.onclick = function(){
// 3.計算索引
that.changeIndex();
}
}
Banner.prototype.changeIndex = function(){
// 計算索引
if(this.index === this.imgs.length-1){
this.index = 0;
}else{
this.index++;
}
// 4.根據索引，顯示圖片
this.display()
}
Banner.prototype.display = function(){
// 顯示圖片
this.imgs[this.index].style.zIndex = this.i++;
// this.imgs[this.index].style.width = 0;
// move(this.imgs[this.index],{
// width:1000
// })
this.imgs[this.index].style.width = 0;
this.imgs[this.index].style.height = 0;
move(this.imgs[this.index],{
width:1000,
height:300
})
// this.imgs[this.index].style.left = "-1000px";
// move(this.imgs[this.index],{
// left:0,
// })
// this.imgs[this.index].style.width = "0";
// this.imgs[this.index].style.height = "0";
// move(this.imgs[this.index],{
// width:1000,
// height:150
// },function(){
// move(this.imgs[this.index],{height:300})
// }.bind(this))
}
new Banner();
</script>
</html>
在這里我們提前封裝了“move”JS文件，來實現輪播圖的運動（如下）：
function move(ele,json,callback){ clearInterval(ele.t); ele.t = setInterval(() => { var onoff = true; for(var i in json){ var iNow = parseInt(getStyle(ele,i)); var speed = (json[i] - iNow)/6; speed = speed<0 ? Math.floor(speed) : Math.ceil(speed); if(iNow != json[i]){ onoff = false; } ele.style[i] = iNow + speed + "px"; } if(onoff){ clearInterval(ele.t); callback && callback(); } }, 30); } function getStyle(ele,attr){ if(ele.currentStyle){ return ele.currentStyle[attr]; }else{ return getComputedStyle(ele,false)[attr]; } }
接着我們再實現無縫輪播圖：
方法一：（這個方法運用的是將輪播圖假設成一個像跑馬燈一樣的性質，不斷的銜接的那種方式來實現輪播圖效果；這個方法雖然實現了輪播圖的效果，但是還是有一個小缺點，那就是當如果在輪播圖的下方實現點擊按鈕到達對應圖片的功能的時候，比如在圖片1，你點擊第5個按鈕的話，雖然會跳轉，但是中間的二三四圖片也會相對的一閃而過，就會影響用戶體驗）
<!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>Document</title>
<style>
.banner{width:1000px;height:300px;margin: 20px auto;position: relative;}
.imgbox{position: absolute;left:0;}
.imgbox img{width: 1000px;height:300px;float:left;}
.btns input{position: absolute;top:130px;width:40px;height:40px;border: none;background: rgba(200,200,200,0.5);}
#left{left:0}
#right{right:0}
</style>
</head>
<body>
<div class="banner">
<div class="imgbox">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
<!-- W1.復制第一張圖片在最后，做過渡用 -->
<img src="img/1.jpg" alt="">
</div>
<div class="btns">
<input type="button" id="left" value="<<<">
<input type="button" id="right" value=">>>">
</div>
</div>
</body>
<script src="../move.js"></script>
<script>
// OOA:
// OOD:
// OOP:
function Banner(){
this.left = document.getElementById("left")
this.right = document.getElementById("right")
this.imgbox = document.querySelector(".imgbox")
this.img = this.imgbox.children;
this.imgbox.style.width = this.img.length * this.img[0].offsetWidth + "px";
this.index = 0;
this.init()
}
Banner.prototype.init = function(){
var that = this;
// this.left.onclick = function(){}
this.right.onclick = function(){
that.changeIndex()
}
}
Banner.prototype.changeIndex = function(){
if(this.index == this.img.length-1){
// W2.當索引到最后一個時，回到真正的第二張圖片，索引為1
this.index = 1;
// W3.索引設置好之后，將imgbox的left設置成初始值left:0
// move會從left:0走到-index1*width1000
this.imgbox.style.left = 0;
}else{
this.index++
}
this.display();
}
Banner.prototype.display = function(){
move(this.imgbox,{
left:-this.index * this.img[0].offsetWidth
})
}
new Banner();
</script>
</html>
所以為了解決上面遇到的那個瑕疵，我們就可以使用方法二：（在這個無縫輪播圖中就完美的實現了無縫輪播，我們使用的原理是，就比如將圖片都放置在將要顯示的可視區域的左右，當我們需要哪一張出來的時候，就將它抽出來，就不會出現方法一那樣的BUG，在方法二中，要注意左右按鈕分別的控制，比當我點擊左邊按鈕，那么要進來的假設是第三張圖片，那么被抽離的當前圖片就應該是第四張圖片；而當我點擊右鍵的按鈕，假設要進來的是第二張圖片，那么要被抽離的圖片就是圖便一）
<!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>Document</title>
<style>
.banner{width:1000px;height:300px;margin: 20px auto;position: relative;overflow: hidden;}
.imgbox img{width: 1000px;height:300px;position: absolute;left:1000px;top:0;}
.imgbox img:nth-child(1){left:0;}
.btns input{position: absolute;top:130px;width:40px;height:40px;border: none;background: rgba(200,200,200,0.5);}
#left{left:0}
#right{right:0}
</style>
</head>
<body>
<div class="banner">
<div class="imgbox">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
</div>
<div class="btns">
<input type="button" id="left" value="<<<">
<input type="button" id="right" value=">>>">
</div>
</div>
</body>
<script src="../move.js"></script>
<script>
function Banner(){
this.left = document.getElementById("left")
this.right = document.getElementById("right")
this.imgbox = document.querySelector(".imgbox")
this.img = this.imgbox.children;
this.index = 0;
// W1.設置要走的索引
this.iPrev = this.img.length - 1;
this.init()
}
Banner.prototype.init = function(){
var that = this;
// this.left.onclick = function(){}
this.right.onclick = function(){
that.changeIndex()
}
}
Banner.prototype.changeIndex = function(){
if(this.index == this.img.length-1){
this.index = 0;
// W2.當要進來的是第0張時，走的是最后一張
this.iPrev = this.img.length-1
}else{
this.index++;
// W3.正常情況下，走的都是進來的上一張，上一張為當前-1
this.iPrev = this.index-1;
}
this.display();
}
Banner.prototype.display = function(){
// W4.根據要走的和要進來的索引
// 先設置初始位置，然后再開始走(move)
// 要走的：this.img[this.iPrev]
this.img[this.iPrev].style.left = 0;
move(this.img[this.iPrev],{left:-this.img[0].offsetWidth})
// 要進來的：this.img[this.index]
this.img[this.index].style.left = this.img[0].offsetWidth + "px";
move(this.img[this.index],{left:0})
}
new Banner();
</script>
</html>
方然在這幾種輪播圖的方法中，要十分清楚的計算出來，你當前這個圖片所在的索引以及應該增加或扣除的長度。以及在move的玩法，有許多中，可以有各種的圖片加載的方式，還是十分有趣的。