<!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();
}
this.left.onclick=function () {
that.changeIndex2();//为什么不用this？因为这里的this绑定的是点击的元素,如果用this指的是实例
}
}
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";
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))
}
Banner.prototype.changeIndex2=function () {
if(this.index==0){
this.index=this.imgs.length-1
}
else{
this.index--;//点击的时候索引就加1
}
this.display2()
};
Banner.prototype.display2=function () {
this.imgs[this.index].style.zIndex=this.i++;
this.imgs[this.index].style.left = "2000px";
move(this.imgs[this.index],{
left:0
});
}
new Banner();
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];
}
}
</script>
</html>
长风破浪会有时，直挂云帆济沧海