js实现php中图片轮播,两种js实现轮播图的方式-CSDN博客

本文主要为大家详细介绍了js实现轮播图的两种方式，一是构造函数、另一种是面向对象方式方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

1、构造函数

*{ margin:0; padding:0;}

#wrap{

width:500px;

height:360px;

margin:100px auto;

position:relative;

}

#pic{

width:500px;

height:360px;

position:relative;

}

#pic img{

width: 100%;

height: 100%;

position:absolute;

top:0;

left:0;

display:none;

}

#tab{

width:105px;

height:10px;

position:absolute;

bottom:10px;

left:50%;

margin-left:-50px;

}

#tab ul li{

width:10px;

height:10px;

margin:0 5px;

background:#bbb;

border-radius:100%;

cursor:pointer;

list-style:none;

float:left;

}

#tab ul li.on{ background:#f60;}

#btn p{

width:40px;

height:40px;

position:absolute;

top:50%;

margin-top:-20px;

color:#fff;

background:#999;

background:rgba(0,0,0,.5);

font-size:20px;

font-weight:bold;

font-family:'Microsoft yahei';

line-height:40px;

text-align:center;

cursor:pointer;

}

#btn p#left{ left:0;}

#btn p#right{ right:0;}

var oWrap=document.getElementById('wrap')

var picImg=document.getElementById('pic').getElementsByTagName('img');

var tabLi=document.getElementById('tab').getElementsByTagName('li');

var btnp=document.getElementById('btn').getElementsByTagName('p');

var index=0;

var timer=null;//设置一个timer变量,让他的值为空

//初始化

picImg[0].style.display='block';

tabLi[0].className='on';

for(var i=0;i

tabLi[i].index=i;

tabLi[i].οnclick=function(){

//不然要for循环清空

/* for(var i=0;i

picImg[i].style.display='none';

tabLi[i].className='';

}*/

picImg[index].style.display='none'; //每个li都有index自定义属性

tabLi[index].className='';

index=this.index;

picImg[index].style.display='block';

tabLi[index].className='on';

}

};

for(var i=0;i

btnp[i].index=i;

btnp[i].onselectstart=function(){ //禁止选择

return false;

}

btnp[i].οnclick=function(){

picImg[index].style.display='none'; //每个li都有index自定义属性

tabLi[index].className='';

//index=this.index;

if(this.index){

index++; //进来就加1，index就相当1%4 2%4 3%4 4%4

//if(index>tabLi.length){index=0}

//index=index%arrUrl.length; 自己取模自己等于0 alert(3%3) == 0

index%=tabLi.length;//相当于当大于tabLi.length就等于0

}else{

index--;

if(index<0)index=tabLi.length-1;

}

picImg[index].style.display='block';

tabLi[index].className='on';

}

};

auto();

oWrap.οnmοuseοver=function(){

clearInterval(timer)

}

oWrap.οnmοuseleave=function(){

auto();

}

function auto(){

timer=setInterval(function(){ //一般都是向左轮播,index++

picImg[index].style.display='none';

tabLi[index].className='';

index++;

index%=tabLi.length;

picImg[index].style.display='block';

tabLi[index].className='on';

},2000)

};

2、面向对象

*{ margin:0; padding:0;}

#wrap{

width:500px;

height:360px;

margin:100px auto;

position:relative;

}

#pic{

width:500px;

height:360px;

position:relative;

}

#pic img{

width: 100%;

height: 100%;

position:absolute;

top:0;

left:0;

display:none;

}

#tab{

width:105px;

height:10px;

position:absolute;

bottom:10px;

left:50%;

margin-left:-50px;

}

#tab ul li{

width:10px;

height:10px;

margin:0 5px;

background:#bbb;

border-radius:100%;

cursor:pointer;

list-style:none;

float:left;

}

#tab ul li.on{ background:#f60;}

#btn p{

width:40px;

height:40px;

position:absolute;

top:50%;

margin-top:-20px;

color:#fff;

background:#999;

background:rgba(0,0,0,.5);

font-size:20px;

font-weight:bold;

font-family:'Microsoft yahei';

line-height:40px;

text-align:center;

cursor:pointer;

}

#btn p#left{ left:0;}

#btn p#right{ right:0;}

var oWrap=document.getElementById('wrap')

var picImg=document.getElementById('pic').getElementsByTagName('img');

var tabLi=document.getElementById('tab').getElementsByTagName('li');

var btnp=document.getElementById('btn').getElementsByTagName('p');

function Banner(oWrap,picImg,tabLi,btnp){

this.wrap=oWrap

this.list=picImg

this.tab=tabLi

this.btn=btnp

this.index=0; //这些都必须是私有的，不然两个banner会一样

this.timer=null;

this.length=this.tab.length;

// this.init();//下面创建好，要在这里执行

}

//初始化分类

Banner.prototype.init=function(){ //先把下面的分类

var This=this; //var 一个This变量把this存起来

this.list[0].style.display='block';

this.tab[0].className='on';

for(var i=0;i

this.tab[i].index=i;

this.tab[i].οnclick=function(){

//this.list[index].style.display='none'; 这里的this指向tab的this

This.list[This.index].style.display='none';

This.tab[This.index].className='';

//index=this.index;

This.index=this.index;

This.list[This.index].style.display='block';

//This.tab[This.index].className='on';

this.className='on';

}

};

for(var i=0;i

this.btn[i].index=i;

this.btn[i].onselectstart=function(){

return false;

}

this.btn[i].οnclick=function(){

This.list[This.index].style.display='none';

This.tab[This.index].className='';

if(this.index){

This.index++;

This.index%=This.length;

}else{

This.index--;

if(index<0)This.index=This.length-1;

}

This.list[This.index].style.display='block';

This.tab[This.index].className='on';

}

this.auto();

this.clear();

};

Banner.prototype.auto=function(){

var This=this;

This.timer=setInterval(function(){ //一般都是向左轮播,index++

This.list[This.index].style.display='none';

This.tab[This.index].className='';

This.index++;

This.index%=This.length;

This.list[This.index].style.display='block';

This.tab[This.index].className='on';

},2000)

};

Banner.prototype.clear=function(){

var This=this;

this.wrap.οnmοuseοver=function(){

clearInterval(This.timer)

}

this.wrap.οnmοuseleave=function(){

This.auto();

}

};

var banner1=new Banner(oWrap,picImg,tabLi,btnp);

banner1.init();

* init()

* function init(){

for(var i=0;i

tabLi[i].index=i;

tabLi[i].οnclick=function(){

picImg[index].style.display='none';

tabLi[index].className='';

index=this.index;

picImg[index].style.display='block';

tabLi[index].className='on';

}

};

}

for(var i=0;i

btnp[i].index=i;

btnp[i].onselectstart=function(){

return false;

}

btnp[i].οnclick=function(){

picImg[index].style.display='none';

tabLi[index].className='';

if(this.index){

index++;

index%=tabLi.length;

}else{

index--;

if(index<0)index=tabLi.length-1;

}

picImg[index].style.display='block';

tabLi[index].className='on';

}

};

auto();

oWrap.οnmοuseοver=function(){

clearInterval(timer)

}

oWrap.οnmοuseleave=function(){

auto();

}

function auto(){

timer=setInterval(function(){ //一般都是向左轮播,index++

picImg[index].style.display='none';

tabLi[index].className='';

index++;

index%=tabLi.length;

picImg[index].style.display='block';

tabLi[index].className='on';

},2000)

};