CSS部分
#box{
width:400px;
height:200px;
position:relative;
overflow:hidden;
border:1px solid black;
}
HTML部分(写一个div并添加样式)
<div id='box' ></div>
js部分
function Banner(element,width,height,timeSpace,timeLong,imgs,btnColor,changeColor,btnHeight,btnWidth,isCircle){
this.element=element;//父元素
this.width=width;
this.height=height;
this.timeSpace=timeSpace;
this.timer=null;
this.img = imgs;//图片的src路径
this.ord=0;
this.domImgs = null;//img标签
this.lis=null;
this.btnColor=btnColor;
this.changeColor=changeColor;
this.btnHeight=btnHeight;
this.btnWidth=btnWidth;
this.circle=isCircle;
this.timeLong=timeLong;
this.createEle=function(){
for(let i=0;i<this.img.length;i++){
this.domImgs=document.createElement("img");
this.domImgs.src=this.img[i];
this.domImgs.style.cssText="position:absolute;";
this.domImgs.style.width=this.width+"px";
this.domImgs.style.height=this.height+"px";
if(i==0){
this.domImgs.style.left=0;
}else{
this.domImgs.style.left=this.width+"px";
}
this.element.appendChild( this.domImgs);
}
let uls=document.createElement("ul");
uls.style.cssText="position:absolute;left:30%;bottom:10px;list-style:none;z-index:1;"
for(let i=0;i<this.img.length;i++){
let lis=document.createElement("li");
lis.style.cssText="float:left;margin-right:5px;";
lis.style.width=this.btnWidth+"px";
lis.style.height=this.btnHeight+"px";
lis.style.border="1px "+"solid "+this.changeColor;
if(this.circle){
lis.style.borderRadius=50+"%";
}
if(i==0){
lis.style.background=this.changeColor;
}else{
lis.style.backround=this.btnColor;
}
uls.appendChild(lis);
}
this.element.appendChild(uls);
}
this.autoPlay=function(){
if(this.timer!=null){
return;
}
this.timer=setInterval(()=>{
let outOrd=this.ord;
this.ord=this.ord+1;
if(this.ord>=this.img.length){
this.ord=0;
}
this.showImg(outOrd,this.ord);
},this.timeSpace);
}
this.showImg=function(outOrd,ord){
let imgs=this.element.children;
// imgs[ord].style.left = this.width+"px";
let left1=0;
let timeSpace=10;
let step=Math.abs(this.width)/(this.timeLong/timeSpace);
let direction=-1;
let myTimer=setInterval(()=>{
left1+=direction*step;
if(left1<=-this.width){
left1=-this.width;
clearInterval(myTimer);
}
imgs[outOrd].style.left=left1+"px";
imgs[ord].style.left=left1+this.width+"px";
});
let lis=this.element.lastChild.children;
for(let i=0;i<lis.length;i++){
lis[i].style.background=btnColor;
}
lis[ord].style.background=changeColor;
}
this.stop=function(){
if(this.timer!=null){
window.clearInterval(this.timer);
this.timer= null;
}
}
this.addEvent=function(){
this.element.onmouseover=()=>{
this.stop();
}
this.element.onmouseout=()=>{
this.autoPlay();
}
let lis=this.element.lastElementChild.children;
for(let i=0;i<lis.length;i++){
lis[i].setAttribute("index",i)
lis[i].onclick = ()=>{
this.goImg(parseInt(lis[i].getAttribute("index")));
};
}
}
this.goImg=function(transIndex){//2
//1、改变数据(图片序号)
let outIndex = this.ord;
this.ord=transIndex;//2
//2、边界处理
if(this.ord>this.img.length-1 || this.ord<0){
this.ord = 0;
}
//3、改变外观
this.showImg(outIndex,this.ord);
}
this.createEle();
this.addEvent();
}
window.onload=function(){
let s1 = new Banner(
document.getElementById('box'),
400,
200,
3000,
2000,
["./11.jpg","./12.jpg","./24.jpg","./37.jpg"],
"transparent",
"red",
20,
40,
false,
);
s1.autoPlay();
}