js實現(xiàn)輪播圖的兩種方式(構(gòu)造函數(shù)、面向?qū)ο?
更新時間：2017年09月30日 14:42:33 作者：sayid~
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)輪播圖的兩種方式，一是構(gòu)造函數(shù)、另一種是面向?qū)ο蠓绞椒绞?，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)輪播圖的具體代碼，供大家參考，具體內(nèi)容如下
1、構(gòu)造函數(shù)
<!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;//設(shè)置一個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循環(huán)清空
/* 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++; //進(jìn)來就加1，index就相當(dāng)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;//相當(dāng)于當(dāng)大于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、面向?qū)ο?/p>
<!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();//下面創(chuàng)建好，要在這里執(zhí)行
}
//初始化分類
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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JS運(yùn)動的實現(xiàn)原理，介紹了JS多種運(yùn)動方式，希望大家仔細(xì)學(xué)習(xí)，感興趣的小伙伴們可以參考一下2015-12-12
javascript表單驗證使用示例(javascript驗證郵箱)
JavaScript可用來在數(shù)據(jù)被送往服務(wù)器前對HTML表單中的這些輸入數(shù)據(jù)進(jìn)行驗證2014-01-01
這篇文章主要介紹了JavaScript語法約定和程序調(diào)試原理解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-11-11
這篇文章主要介紹了JavaScript獲取文本框內(nèi)選中文本的方法,實例分析了javascript通過onclick獲取文本框選中文本的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
關(guān)于javascript獲取內(nèi)聯(lián)樣式與嵌入式樣式的實例
這篇文章主要介紹了關(guān)于javascript獲取內(nèi)聯(lián)樣式與嵌入式樣式的實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
創(chuàng)建彈出div窗口。2009-02-02
一段效率很高的for循環(huán)語句使用方法...2007-08-08
詳解JavaScript Alert函數(shù)執(zhí)行順序問題
本文主要介紹了Javascript的Alert函數(shù)執(zhí)行順序問題，對此感興趣的同學(xué)，可以實驗一下，以便解決平時遇到的一些奇怪的問題。2021-05-05
JavaScript遞歸函數(shù)解“漢諾塔”算法代碼解析
這篇文章主要介紹了JavaScript遞歸函數(shù)解“漢諾塔”算法代碼解析,需要的朋友可以參考下2018-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義導(dǎo)航欄效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05