面向对象的轮播图
js文件:
/*这里是封装的轮播图js,function Carousel(parent,list,bnList)—HTML进行调用时仅需输入,轮播图的父级,轮播图片
- 路径数组list、左右按钮图片路径数组。
*此轮播图特点,每次灌入新的信息前都还将之前的信息以及数据进行清空,典型的热更案例
*
*
-
整体思路:创建一个大的容器div:子①放轮播图的imgCon div;子②、子③左右按钮;子④ul
-
进行样式设置时,默认父级div和imgCon div的宽高均由内容(图片)决定;此外对父级div设置了宽高属性,也可通过设置父级div的宽高
-
改变轮播图的大小
-
*/
var Carousel=(function () {
//创建样式
var liStyle={
width: “20px”,
height: “20px”,
borderRadius:“20px”,
backgroundColor:“rgba(255,0,0,0.1)”,
border: “1px solid #FF0000”,
float: “left”,
lineHeight: “20px”,
textAlign: “center”,
marginLeft: “20px”,
color:“white”
};
var ulStyle={
margin:0,
padding:0,
listStyle: “none”,
position: “absolute”,
bottom: “20px”
};
//包含图片的div的样式
var imgConStyle={
position: “absolute”,
left:“0px”
};
//最外层的div的样式
var maskDivStyle={overflow: "hidden", position:"relative" , margin: "auto", backgroundColor: "antiquewhite"
};
function Carousel(parent,list,bnList) {
this.source=list;//存放图片路径的数组
this.initCarousel(parent,bnList);//initCarousel里面的参数
}
Carousel.prototype={
imageList:[], //图片的数组
carousel:null, //第一个div
_width:0, //宽和高
_height:0,
_source:null, //图片的路径的数组
position:0,
direction:"",
bool:false, //点击
autoBool:false, //动画
time:0,
timeDelay:270,
preDot:null,
set source(value){
if(!value)return;
this._source=value;
this.width=0;
this.height=0;
this.direction="";
this.position=0;
this.imageList.length=0;
this.loadImg(value);
},
get source(){
return this._source;
},
set width(value){
this._width=value;
if(value>0){
this.carousel.style.width=value+“px”;
for(var i=0;i<this.carousel.firstElementChild.children.length;i++){
this.carousel.firstElementChild.children[i].style.width=value+“px”;
}
}
},
get width(){
return this._width
},
set height(value){
this._height=value;
if(value>0){
this.carousel.firstElementChild.style.height=this.carousel.style.height=value+“px”;
for(var i=0;i<this.carousel.firstElementChild.children.length;i++){
this.carousel.firstElementChild.children[i].style.height=value+“px”;
}
this.resetBnPosition();
}
},
get height(){
return this._height
},
//图片的预加载
loadImg:function (list) {
var img=new Image();
img.self=this;
img.num=0;
img.list=list;
img.imgList=[];
img.addEventListener(“load”,this.loadHandler);
img.src=list[img.num];
},
//图片的侦听事件
loadHandler:function (e) {
//复制图片将他储存到imgList
this.imgList.push(this.cloneNode(false));
this.num++;
if(this.num>this.list.length-1){
this.removeEventListener(“load”,this.loadHandler);
this.self.finishLoad(this.imgList);
return;
}
this.src=this.list[this.num];
},
finishLoad:function (list) {
var imgCon=this.carousel.firstElementChild;
var ul=this.carousel.lastElementChild;
this.imageList=list;
this.clearCon(imgCon);//清除图片的容器div
this.clearCon(ul); //清除ul
imgCon.appendChild(this.imageList[0]); //将他添加在储存图片的数组中
if(this.width=0){ //如果他的宽度为0则储存图片的宽度等于最大容器的宽度
this.carousel.style.width=this.imageList[0].width+“px”;
this._width=this.imageList[0].width;
}else{ //如果他的宽度不为0则图片的宽度等于最大容器的宽度
this.carousel.style.width=this.width+“px”;
for(var j=0;j<imgCon.children.length;j++){
imgCon.children[j].style.width=this.width+“px”;
}
}
if(this.height=0){
imgCon.style.height=this.carousel.style.height=this.imageList[0].height+“px”;
this._height=this.imageList[0].height;
}else{
imgCon.style.height=this.carousel.style.width=this.height+“px”;
for(var s=0;s<imgCon.children.length;s++){
imgCon.children[s].style.height=this.height+“px”;
}
}
//创建储存数组的循环 li跟组储存数组的数量来创建 的
for(var i=0;i<this.imageList.length;i++){
var li=document.createElement(“li”);
Object.assign(li.style,liStyle);
ul.appendChild(li);
}
ul.addEventListener(“click”,this.ulClickHandler);
ul.style.left=( this.carousel.offsetWidth-ul.offsetWidth)/2+“px”;//ul的位置
this.changeDot();
this.resetBnPosition(); //执行左右按键
},
clearCon:function (con) { //清除函数
var len=con.children.length;
for(var i=0;i<len;i++){
con.firstElementChild.remove();
}
},
initCarousel:function (parent,bnList) { //创建容器
if(!this.carousel){
this.carousel=document.createElement(“div”);
this.carousel.self=this;
this.carousel.addEventListener(“mouseenter”,this.carouselMouseHandler);//移入移出事件
this.carousel.addEventListener(“mouseleave”,this.carouselMouseHandler);
Object.assign(this.carousel.style,maskDivStyle);
var imgCon=document.createElement(“div”);
Object.assign(imgCon.style,imgConStyle);
this.carousel.appendChild(imgCon);
for(var i=0;i<bnList.length;i++){
var img=new Image();
img.self=this;
img.addEventListener(“load”,this.bnLoadHandler);
img.src=bnList[i];
img.addEventListener(“click”,this.bnClickHandler);
var bnStyle={
position: “absolute”
};
if(i===0){
bnStyle.left=“10px”;
}else{
bnStyle.right=“10px”;
}
Object.assign(img.style,bnStyle);
this.carousel.appendChild(img);
}
var ul=document.createElement(“ul”);
ul.self=this;
Object.assign(ul.style,ulStyle);
this.carousel.appendChild(ul);
parent.appendChild(this.carousel);
}
return this.carousel;
},
bnLoadHandler:function (e) {
this.self.resetBnPosition();
},
resetBnPosition:function () {//左右按键高度等于div的高度减去自身的高度除以2
this.carousel.children[1].style.top=this.carousel.children[2].style.top=(this.height-this.carousel.children[1].offsetHeight)/2+“px”;
},
bnClickHandler:function (e) { //左右按键点击的函数
if(this.self.bool) return;if(this.offsetLeft===10){ this.self.direction="right"; this.self.position--; if(this.self.position<0) this.self.position=this.self.imageList.length-1; }else{ this.self.direction="left"; this.self.position++; if(this.self.position===this.self.imageList.length) this.self.position=0; } this.self.createNextImg(); }, ulClickHandler:function (e) { if(!e.target instanceof HTMLLIElement) return; var arr=Array.from(this.children); var index=arr.indexOf(e.target); if(index===this.self.position) return; this.self.direction=index>this.self.position ? "left" : "right"; this.self.position=index; this.self.createNextImg(); }, createNextImg:function () { //创建图片 var imgCon= this.carousel.firstElementChild;//imgCon等于最大容器的第一个子集 imgCon.style.width=this.carousel.offsetWidth*2+"px"; //最大容器的第一个子集 等于最大容器宽度的2倍 if(this.direction==="left"){ imgCon.appendChild(this.imageList[this.position]); imgCon.style.left="0px"; }else if(this.direction==="right"){ imgCon.insertBefore(this.imageList[this.position],imgCon.firstElementChild); imgCon.style.left=-this.carousel.offsetWidth+"px"; } if(this.width!==0){ this.imageList[this.position].style.width=this.width+"px"; } if(this.height!==0){ this.imageList[this.position].style.height=this.height+"px"; } this.changeDot(); this.bool=true; }, update:function () { this.carouselPlay(); this.autoPlayImg(); }, carouselPlay:function () { if(!this.bool) return; var imgCon= this.carousel.firstElementChild; if(this.direction==="left"){ imgCon.style.left=imgCon.offsetLeft-20+"px"; if(imgCon.offsetLeft<-this.carousel.offsetWidth){ imgCon.style.left=-this.carousel.offsetWidth+"px"; this.bool=false; this.direction=""; imgCon.firstElementChild.remove(); imgCon.style.left="0px"; } }else if(this.direction==="right"){ imgCon.style.left=imgCon.offsetLeft+20+"px"; if(imgCon.offsetLeft>=0){ imgCon.style.left="0px"; this.bool=false; this.direction=""; imgCon.lastElementChild.remove(); } } }, autoPlayImg:function () { //动画函数 if(!this.autoBool) return; this.time--; if(this.time>0)return; this.time=this.timeDelay; this.direction="left"; this.position++; if(this.position===this.imageList.length) this.position=0; this.createNextImg(); }, carouselMouseHandler:function (e) { if(e.type==="mouseenter"){ this.self.autoBool=false; }else if(e.type==="mouseleave"){ this.self.autoBool=true; this.self.time=this.self.timeDelay; } }, changeDot:function () { if(this.preDot){ this.preDot.style.backgroundColor="rgba(255,0,0,0.1)"; } this.preDot=this.carousel.lastElementChild.children[this.position]; this.preDot.style.backgroundColor="rgba(255,0,0,0.6)"; }
};
Carousel.prototype.constructor=Carousel;
return Carousel;
})();
html:
<script>
var arr=["imgs/a.png","imgs/b.png","imgs/c.png","imgs/d.png","imgs/e.png"];
var arr1=["imgs/1.jpg","imgs/2.jpg","imgs/3.jpg","imgs/4.jpg"];
var carousel=new Carousel(document.body,arr,["imgs/left.png","imgs/right.png"]);
var carousel1=new Carousel(document.body,arr1,["imgs/left.png","imgs/right.png"]);
function animation() {
requestAnimationFrame(animation);
carousel.update();
carousel1.update();
}
</script>
图片: ![在这里插入图片描述](https://img-blog.csdnimg.cn/20181109214112810.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjU0NjQ1,size_16,color_FFFFFF,t_70)![在这里插入图片描述](https://img-blog.csdnimg.cn/20181109214208367.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjU0NjQ1,size_16,color_FFFFFF,t_70) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20181109214220952.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjU0NjQ1,size_16,color_FFFFFF,t_70) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20181109214240284.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjU0NjQ1,size_16,color_FFFFFF,t_70) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20181109214248522.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjU0NjQ1,size_16,color_FFFFFF,t_70) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20181109214302158.png) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20181109214309699.png)