html如何做banner点击按钮下一张,banner.html

Document

你的家，听你的

• 
  宜家对公业务
• 
  厨房在线订购业务
• 
  仲夏特惠
• 
  全屋设计
• 
  美好假期 崭新生活

class Banner{

constructor(){

this.img = document.querySelectorAll("#banner .imgbox li");

this.left = document.querySelector(".btnL")

this.right = document.querySelector(".btnR")

this.span = document.querySelectorAll(".ind li");

// 4假设索引

// 假设当前是0

this.iNow = 0;

// 假设上一张是最后一张

this.iPrev = this.img.length-1;

// 1绑定事件

this.addEvent()

this.timer = 3000

this.timeout()

}

timeout(){

var t

clearInterval(t)

t = setInterval(()=>{

this.btnChangeIndex(-1);

// 11-2点击按钮时,也设置span的当前焦点

this.setActive(this.span[this.iNow]);

},this.timer)

}

addEvent(){

var that = this;

// 2-1左按钮事件

this.left.onclick = function(){

// 3-1改变索引

that.btnChangeIndex(1);

// 11-1点击按钮时,也设置span的当前焦点

that.setActive(that.span[that.iNow]);

}

// 2-2右按钮事件

this.right.onclick = function(){

// 3-2改变索引

that.btnChangeIndex(-1);

// 11-2点击按钮时,也设置span的当前焦点

that.setActive(that.span[that.iNow]);

}

// 6绑定span的事件

for(var i=0;i

// 7绑定span的索引

this.span[i].index = i;

this.span[i].onclick = function(){

// console.log(this.index); 当前span索引

// 8计算索引

that.listChangeIndex(this.index);

// 10设置当前焦点

that.setActive(this);

}

}

}

listChangeIndex(index){

// 计算索引功能：点击元素的索引

// 点击的比当前大,向左运动

if(index > this.iNow){

// console.log("左")

// 9-1开始运动

// jiuzhe

this.listMove(1,index)

}

// 点击的比当前小,向右运动

if(index < this.iNow){

// console.log("右")

// 9-2开始运动

this.listMove(-1,index)

}

this.iNow = index;

}

listMove(d,index){

// span的运动功能:参考btn的运动:

// 参数1：方向：1或-1

// 参数2：点击的元素的索引

this.img[this.iNow].style.left = 0;

move(this.img[this.iNow], {left:-this.img[0].offsetWidth*d})

this.img[index].style.left = this.img[0].offsetWidth*d + "px";

move(this.img[index], {left:0})

}

setActive(ele){

// 当前焦点的功能:参数:当前span

for(var i=0;i

this.span[i].className = "";

}

ele.className = "active"

// console.log(ele)

}

btnChangeIndex(d){

// 改变索引功能:方向:1或-1

if(d === 1){

if(this.iNow == 0){

this.iNow = this.img.length-1;

this.iPrev = 0;

}else{

this.iNow--;

this.iPrev = this.iNow + 1;

}

}else{

if(this.iNow == this.img.length-1){

this.iNow = 0;

this.iPrev = this.img.length-1

}else{

this.iNow++;

this.iPrev = this.iNow - 1;

}

}

// 5左右按钮的运动

this.btnMove(d);

}

btnMove(d){

// 左右按钮运动的功能:方向:1或-1

// console.log(this.iPrev, this.iNow);

// 设置从哪开始走

this.img[this.iPrev].style.left = 0;

// 走到哪

move(this.img[this.iPrev],{

left:this.img[0].offsetWidth * d

})

// 设置从哪开始进来

this.img[this.iNow].style.left = -this.img[0].offsetWidth * d+"px";

// 进到哪

move(this.img[this.iNow],{left:0});

}

}

new Banner;

一键复制

编辑

Web IDE

原始数据

按行查看

历史