JS实现轮播图案例

第JS实现轮播图案例本文实例为大家分享了JS实现轮播图案例的具体代码，供大家参考，具体内容如下

实现功能：

1、自动轮播：鼠标停留在轮播图上时不切换图片，鼠标离开后自动轮播。

2、点击左右按钮切换图片。

3、点击下方按钮切换到对应的图片。

4、轮播图大小自适应：

可以放入到执行的父容器中展示。

不指定父容器时，默认放入body标签。占满一屏的宽度，当改变浏览器窗口大小时，轮播图大小成比例改变。

可以指定轮播图的宽高。

实现方式：用面向对象的方式实现，使用时传入图片和图片对应的数据，再创建实例。

importCarouselfrom'./js/Carousel.js';

varitemList1=[{

day:26,

date:"/Oct.2025",

title:"秘境之蓝无阿里不西藏自驾阿里小北线",

src:"./carousel_img/a.jpg",

},

{

day:25,

date:"/Oct.2025",

title:"这是一个什么样的国家？",

src:"./carousel_img/b.jpg",

},

{

day:24,

date:"/Oct.2025",

title:"在徽州，给秋天写了8封信",

src:"./carousel_img/c.jpg",

},

{

day:23,

date:"/Oct.2025",

title:"「穿过狂野的风」赶赴内蒙的追羊计划",

src:"./carousel_img/d.jpg",

},

{

day:22,

date:"/Oct.2025",

title:"爱让我们无所不能｜南极大冒险",

src:"./carousel_img/e.jpg",

},

];

letcarousel1=newCarousel(itemList1);

carousel1.appendTo(".div1");

animation();

functionanimation(){

requestAnimationFrame(animation);

carousel1.update();

//carousel2.update();

}

代码：

importComponentfrom'./Component.js';

exportdefaultclassCarouselextendsComponent{

imgList;

bnList;

imgCon;

dot;

dotList=[];

data;

direction;

pos=0;

x=0;

speedX=1;

bool=false;

time=200;

autoBool=true;

//WIDTH=13.66;

//HEIGHT=4.55;

WIDTH;

HEIGHT;

constructor(_data,_width,_height){

super("div");

this.data=_data;

this.width=_width;

this.height=_height;

this.elem.className="carousel";

//Object.assign(this.elem.style,{

//

width:this.WIDTH+"rem",

//

height:this.HEIGHT+"rem",

//

position:"relative",

//

overflow:"hidden",

//});

letarr=["./carousel_img/left.png","./carousel_img/right.png"];

let_imgList=this.data.reduce((value,item)={

if(item.src)value.push(item.src);

returnvalue

},arr);

this.loadImg(_imgList,this.createCarousel);

//window.addEventListener("resize",e=this.resizeHandler(e));

}

createCarousel(imgList){

Object.assign(this.elem.style,{

width:this.WIDTH+"rem",

height:this.HEIGHT+"rem",

position:"relative",

overflow:"hidden",

});

this.imgList=imgList;

this.bnList=this.imgList.splice(0,2);

imgList.forEach(item={

Object.assign(item.style,{

width:this.WIDTH+"rem",

height:this.HEIGHT+"rem",

})

})

this.createimgCon();

this.createDotList();

this.createBn();

//动画一般在外面做，类里面只需要写状态更新即可。

//this.animation();

//鼠标停留在轮播图上时不进行自动轮播。

this.elem.addEventListener("mouseenter",e=this.mouseHandler(e));

this.elem.addEventListener("mouseleave",e=this.mouseHandler(e));

}

createimgCon(){

this.imgCon=document.createElement("div");

Object.assign(this.imgCon.style,{

width:this.WIDTH*2+"rem",

height:this.HEIGHT+"rem",

position:"absolute",

});

letitem=this.createItem(this.imgList[0],this.data[0]);

this.imgCon.appendChild(item);

this.elem.appendChild(this.imgCon);

}

createItem(img,obj){

letitem=document.createElement("div");

Object.assign(item.style,{

width:this.WIDTH+"rem",

height:this.HEIGHT+"rem",

position:"relative",

float:"left",

});

lettitle=document.createElement("div");

Object.assign(title.style,{

position:"absolute",

left:"15%",

top:"0.3rem",

fontSize:"0.3rem",

color:"#ffffff",

textShadow:"0.02rem0.02rem0.02rem#000000",

width:"8rem",

lineHeight:"0.5rem",

})

lethead1=document.createElement("div");

Object.assign(head1.style,{

height:"0.5rem",

})

head1.textContent=obj.date;

letspan=document.createElement("span");

Object.assign(span.style,{

fontSize:"0.4rem",

});

span.textContent=obj.day;

lethead2=document.createElement("div");

Object.assign(head2.style,{

height:"0.5rem",

})

head2.textContent=obj.title;

head1.insertBefore(span,head1.firstChild);

title.appendChild(head1);

title.appendChild(head2);

item.appendChild(title);

item.appendChild(img);

returnitem;

}

createDotList(){

this.dot=document.createElement("ul");

Object.assign(this.dot.style,{

listStyle:"none",

margin:0,

padding:0,

position:"absolute",

left:(this.WIDTH-1.8)/2+"rem",

bottom:"0.3rem",

})

for(leti=0;ithis.imgList.length;i++){

letli=document.createElement("li");

Object.assign(li.style,{

width:"0.18rem",

height:"0.18rem",

borderRadius:"0.2rem",

marginLeft:i===0"0px":"0.2rem",

border:"0.02remsolidred",

float:"left",

})

this.dot.appendChild(li);

this.dotList.push(li);

}

this.dot.addEventListener("click",e=this.dotClickHandler(e));

this.elem.appendChild(this.dot);

}

createBn(){

for(leti=0;ithis.bnList.length;i++){

Object.assign(this.bnList[i].style,{

position:"absolute",

top:(this.HEIGHT*100-this.bnList[i].height)/2/100+"rem",

})

if(i===0){

this.bnList[i].style.left="0.5rem";

}else{

this.bnList[i].style.right="0.5rem";

}

this.bnList[i].addEventListener("click",e=this.bnClickHandler(e));

this.elem.appendChild(this.bnList[i]);

}

}

bnClickHandler(e){

if(this.bool)return

if(e.target===this.bnList[0]){

this.direction="left";

this.pos++;

if(this.posthis.imgList.length-1)this.pos=0;

}else{

this.direction="right";

this.pos--;

if(this.pos0)this.pos=this.imgList.length-1;

}

this.bool=true;

this.createNextItem();

}

dotClickHandler(e){

if(e.target.constructor!==HTMLLIElement)return

//这里因为是对父元素进行侦听，因此要先判断点击的是不是li，如果点击的不是小圆点就不能改变开关，直接return。不能先改变开关。

if(this.bool)return

for(leti=0;ithis.dotList.length;i++){

if(e.target===this.dotList[i]){

if(this.pos===i)return

this.direction=ithis.pos"right":"left";

this.pos=i;

}

}

this.bool=true;

this.createNextItem();

}

createNextItem(){

letnextItem=this.createItem(this.imgList[this.pos],this.data[this.pos]);

if(this.direction==="left"){

this.imgCon.appendChild(nextItem);

this.x=0;

}else{

this.imgCon.insertBefore(nextItem,this.imgCon.firstChild);

this.x=-this.WIDTH;

}

this.imgCon.style.left=this.x+"rem";

}

update(){

this.imgMove();

this.autoPlay();

}

//这里只需要做一个状态更新即可。

//动画在外面做。

//animation(){

//

requestAnimationFrame(this.animation);

//

if(!this.bool)return

//

this.imgMove();

//}

imgMove(){

if(!this.bool)return

if(this.direction==="left"){

this.x-=this.speedX;

if(this.x-this.WIDTH){

this.imgCon.firstElementChild.remove();

this.x=0;

this.bool=false;

}

}else{

this.x+=this.speedX;

if(this.x0){

this.imgCon.lastElementChild.remove();

this.x=0;

this.bool=false;

}

}

this.imgCon.style.left=this.x+"rem";

}

autoPlay(){

if(!this.autoBool)return

this.time--;

//增加防抖

if(this.time===0){

letevt=newEvent("click");

this.bnList[0].dispatchEvent(evt);

this.time=200;

}

}

resizeHandler(e){

document.documentElement.style.fontSize=document.documentElement.clientWidth/(this.WIDTH*100)*100+"px";

}

appendTo(parent){

if(typeofparent==="string")parent=document.querySelector(parent);

parent.appendChild(this.elem);

if(!isNaN(this.WIDTH)!isNaN(this.HEIGHT))return

if(parent===document.body){

this.WIDTH=13.66;

this.HEIGHT=4.55;

}else{

letrect=parent.getBoundingCli