您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)怎么使用js實(shí)現(xiàn)輪播圖的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
1、能夠嵌入動(dòng)態(tài)文本于HTML頁面。2、對(duì)瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測(cè)訪客的瀏覽器信息。6、控制cookies,包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。
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è)置一個(gè)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'; //每個(gè)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'; //每個(gè)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; //這些都必須是私有的,不然兩個(gè)banner會(huì)一樣 this.timer=null; this.length=this.tab.length; // this.init();//下面創(chuàng)建好,要在這里執(zhí)行 } //初始化分類 Banner.prototype.init=function(){ //先把下面的分類 var This=this; //var 一個(gè)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>
感謝各位的閱讀!關(guān)于“怎么使用js實(shí)現(xiàn)輪播圖”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。