js实现轮播图的两种方式(构造函数、面向对象)
程序员文章站
2022-07-05 10:17:42
本文实例为大家分享了js实现轮播图的具体代码，供大家参考，具体内容如下
1、构造函数
...
本文实例为大家分享了js实现轮播图的具体代码，供大家参考，具体内容如下
1、构造函数
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type='text/css'>
*{ 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 div{
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 div#left{ left:0;}
#btn div#right{ right:0;}
</style>
</head>
<body>
<div id="wrap">
<div id="pic">
<img src="img/1.jpg" alt="" />
<img src="img/2.jpg" alt="" />
<img src="img/3.jpg" alt="" />
<img src="img/4.jpg" alt="" />
</div>
<div id="tab">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="btn">
<div id='left'><</div>
<div id='right'>></div>
</div>
</div>
<script>
var owrap=document.getelementbyid('wrap')
var picimg=document.getelementbyid('pic').getelementsbytagname('img');
var tabli=document.getelementbyid('tab').getelementsbytagname('li');
var btndiv=document.getelementbyid('btn').getelementsbytagname('div');
var index=0;
var timer=null;//设置一个timer变量,让他的值为空
//初始化
picimg[0].style.display='block';
tabli[0].classname='on';
for(var i=0;i<tabli.length;i++){
tabli[i].index=i;
tabli[i].onclick=function(){
//不然要for循环清空
/* for(var i=0;i<tabli.length;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<btndiv.length;i++){
btndiv[i].index=i;
btndiv[i].onselectstart=function(){ //禁止选择
return false;
}
btndiv[i].onclick=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.onmouseover=function(){
clearinterval(timer)
}
owrap.onmouseleave=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)
};
</script>
</body>
</html>
2、面向对象
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type='text/css'>
*{ 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 div{
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 div#left{ left:0;}
#btn div#right{ right:0;}
</style>
</head>
<body>
<div id="wrap">
<div id="pic">
<img src="img/1.jpg" alt="" />
<img src="img/2.jpg" alt="" />
<img src="img/3.jpg" alt="" />
<img src="img/4.jpg" alt="" />
</div>
<div id="tab">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="btn">
<div id='left'><</div>
<div id='right'>></div>
</div>
</div>
<script>
var owrap=document.getelementbyid('wrap')
var picimg=document.getelementbyid('pic').getelementsbytagname('img');
var tabli=document.getelementbyid('tab').getelementsbytagname('li');
var btndiv=document.getelementbyid('btn').getelementsbytagname('div');
function banner(owrap,picimg,tabli,btndiv){
this.wrap=owrap
this.list=picimg
this.tab=tabli
this.btn=btndiv
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.length;i++){
this.tab[i].index=i;
this.tab[i].onclick=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.length;i++){
this.btn[i].index=i;
this.btn[i].onselectstart=function(){
return false;
}
this.btn[i].onclick=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.onmouseover=function(){
clearinterval(this.timer)
}
this.wrap.onmouseleave=function(){
this.auto();
}
};
var banner1=new banner(owrap,picimg,tabli,btndiv);
banner1.init();
/*
* init()
* function init(){
for(var i=0;i<tabli.length;i++){
tabli[i].index=i;
tabli[i].onclick=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<btndiv.length;i++){
btndiv[i].index=i;
btndiv[i].onselectstart=function(){
return false;
}
btndiv[i].onclick=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.onmouseover=function(){
clearinterval(timer)
}
owrap.onmouseleave=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)
};
*/
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。