<!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{1000px;height:300px;margin: 20px auto;position: relative;overflow: hidden}
.imgbox img{ 1000px;height:300px;position: absolute;left:1000px;top:0;}
.imgbox img:nth-child(1){left:0;}
.btns input{position: absolute;top:130px;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()
}
this.left.onclick = function(){
that.changeIndex1()
}
}
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.changeIndex1= function(){
if(this.index == 0){
this.index = this.img.length-1;
// W2.当要进来的是最后用一张，走的是第一张
this.iPrev = 0;
}else{
this.index--;
// W3.正常情况下，走的都是进来的下一张，下一张为当前-1
this.iPrev = this.index+1;
}
this.display1();
};
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})
}
Banner.prototype.display1 = 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})
}
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];
}
}
new Banner();
</script>
</html>
简易版：
<!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{1000px;height:300px;margin: 20px auto;position: relative;overflow: hidden;}
.imgbox img{ 1000px;height:300px;position: absolute;left:1000px;top:0;}
.imgbox img:nth-child(1){left:0;}
.btns input{position: absolute;top:130px;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(){
that.changeIndex(-1)
}
this.right.onclick = function(){
that.changeIndex(1)
}
}
Banner.prototype.changeIndex = function(type){
if(type == -1){
if(this.index == 0){
this.index = this.img.length-1;
this.iPrev = 0;
}else{
this.index--;
this.iPrev = this.index+1;
}
}else{
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(type);
}
Banner.prototype.display = function(type){
// W4.根据要走的和要进来的索引
// 先设置初始位置，然后再开始走(move)
// 要走的：this.img[this.iPrev]
this.img[this.iPrev].style.left = 0;
move(this.img[this.iPrev],{left:-this.img[0].offsetWidth * type})
// 要进来的：this.img[this.index]
this.img[this.index].style.left = this.img[0].offsetWidth * type + "px";
move(this.img[this.index],{left:0})
}
new Banner();
</script>
</html>