基于JavaScript實(shí)現(xiàn)仿京東圖片輪播效果
js實(shí)現(xiàn)仿京東圖片輪播效果,當(dāng)鼠標(biāo)劃在窗口上面停止計(jì)時(shí)器,鼠標(biāo)離開窗口,開啟計(jì)時(shí)器,鼠標(biāo)劃在頁(yè)簽上面,停止計(jì)時(shí)器,手動(dòng)切換,通過定義計(jì)時(shí)器封裝函數(shù)run,封裝函數(shù)changeOption,實(shí)現(xiàn)此效果,代碼簡(jiǎn)單易懂,需要的小伙伴直接復(fù)制拷貝轉(zhuǎn)走吧。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0;padding:0;list-style:none;} a{text-decoration: none;color: #fff;} #flash{width: 730px;height: 454px;margin: 100px auto;position: relative;cursor: pointer;} #pic li{position: absolute;top: 0;left: 0;z-index: 1;display: none;} #num{position: absolute;left: 40%;bottom: 10px;z-index: 2;cursor:default;} #num li{float: left;width: 20px;height: 20px;border-radius: 50%;background: #666;margin: 3px;line-height: 20px;text-align: center;color: #fff;cursor: pointer;} #num li.active{background: #f00;} .arrow{height: 60px;width: 30px;line-height: 60px;text-align: center;display: block;position: absolute;top:45%;z-index: 3;display: none;} .arrow:hover{background: rgba(0,0,0,0.7);} #flash:hover .arrow{display: block;} #left{left: 2%;} #right{right: 2%;} </style> <script type="text/javascript"> function $(id) { return typeof id==='string'?document.getElementById(id):id; } window.onload=function(){ var index=0; var timer=null; var pic=$("pic").getElementsByTagName("li"); var num=$("num").getElementsByTagName("li"); var flash=$("flash"); var left=$("left"); var right=$("right"); //單擊左箭頭 left.onclick=function(){ index--; if (index<0) {index=num.length-1}; changeOption(index); } //單擊右箭頭 right.onclick=function(){ index++; if (index>=num.length) {index=0}; changeOption(index); } //鼠標(biāo)劃在窗口上面,停止計(jì)時(shí)器 flash.onmouseover=function(){ clearInterval(timer); } //鼠標(biāo)離開窗口,開啟計(jì)時(shí)器 flash.onmouseout=function(){ timer=setInterval(run,2000) } //鼠標(biāo)劃在頁(yè)簽上面,停止計(jì)時(shí)器,手動(dòng)切換 for(var i=0;i<num.length;i++){ num[i].id=i; num[i].onmouseover=function(){ clearInterval(timer); changeOption(this.id); } } //定義計(jì)時(shí)器 timer=setInterval(run,2000) //封裝函數(shù)run function run(){ index++; if (index>=num.length) {index=0}; changeOption(index); } //封裝函數(shù)changeOption function changeOption(curindex){ console.log(index) for(var j=0;j<num.length;j++){ pic[j].style.display="none"; num[j].className=""; } pic[curindex].style.display="block"; num[curindex].className="active"; index=curindex; } } </script> </head> <body> <div id="flash"> <ul id="pic"> <li style="display:block"><img src="http://img13.360buyimg.com/da/jfs/t2242/262/578407619/87636/4ffe0c5/56187ed2Nfed9a5b3.jpg" alt=""></li> <li><img src="http://img13.360buyimg.com/da/jfs/t2143/111/577347825/96150/e27180bd/561889b3N42ee62b5.jpg" alt=""></li> <li><img src="http://img20.360buyimg.com/da/jfs/t1825/234/1750370913/97529/b9229832/560b5ad3N054605f7.jpg" alt=""></li> <li><img src="http://img10.360buyimg.com/da/jfs/t2026/215/573306345/95654/a0211937/5618a735N1b3d8423.jpg" alt=""></li> <li><img src="http://img20.360buyimg.com/da/jfs/t2065/362/579832759/78899/6f349917/5618c680N3752bacc.jpg" alt=""></li> <li><img src="http://img10.360buyimg.com/da/jfs/t2023/45/384256123/101565/9b6e5daf/5604bdceN8c7d2ccf.jpg" alt=""></li> </ul> <ol id="num"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ol> <a href="javascript:;" class="arrow" id="left"><</a> <a href="javascript:;" class="arrow" id="right">></a> </div> </body> </html>
以上代碼是不是很簡(jiǎn)單啊,基于javascrit實(shí)現(xiàn)仿金東圖片輪播效果就制作成功了,由于時(shí)間原因沒有給大家展示效果圖,還請(qǐng)大家見諒。
相關(guān)文章
Javascript Cookie讀寫刪除操作的函數(shù)
Javascript Cookie讀寫刪除操作的函數(shù)代碼,需要操作cookies的朋友可以參考下。2010-03-03深入理解JavaScript單體內(nèi)置對(duì)象
下面小編就為大家?guī)?lái)一篇JavaScript單體內(nèi)置對(duì)象。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-06-06JS統(tǒng)計(jì)Flash被網(wǎng)友點(diǎn)擊過的代碼
JS統(tǒng)計(jì)Flash被網(wǎng)友點(diǎn)擊過的代碼...2007-05-05PHP abstract與interface之間的區(qū)別
本文是對(duì)PHP中abstract與interface之間的區(qū)別進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過來(lái)參考下,希望對(duì)大家有所幫助2013-11-11原生javascript上傳圖片帶進(jìn)度條【實(shí)例分享】
本文主要介紹了原生javascript上傳圖片帶進(jìn)度條的實(shí)例詳解。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04javascript ajax 仿百度分頁(yè)函數(shù)
百度分頁(yè)想必大家都知道吧,瀏覽網(wǎng)頁(yè)的朋友都應(yīng)該知道,下面有個(gè)小例子使用到了js、ajax等來(lái)模仿百度的分頁(yè),感興趣的朋友可以參考下2013-10-10