本文特意為原生js實(shí)現(xiàn)圖片輪播特效代碼做了下總結(jié)，分享給大家供大家參考，歡迎大家學(xué)習(xí)。
運(yùn)行效果圖：
具體代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>最簡(jiǎn)單的輪播廣告</title> <style> body, div, ul, li { margin: 0; padding: 0; } ul { list-style-type: none; } body { background: #000; text-align: center; font: 12px/20px Arial; } #box { position: relative; width: 492px; height: 172px; background: #fff; border-radius: 5px; border: 8px solid #fff; margin: 10px auto; } #box .list { position: relative; width: 490px; height: 170px; overflow: hidden; border: 1px solid #ccc; } #box .list li { position: absolute; top: 0; left: 0; width: 490px; height: 170px; opacity: 0; transition: opacity 0.5s linear } #box .list li.current { opacity: 1; } #box .count { position: absolute; right: 0; bottom: 5px; } #box .count li { color: #fff; float: left; width: 20px; height: 20px; cursor: pointer; margin-right: 5px; overflow: hidden; background: #F90; opacity: 0.7; border-radius: 20px; } #box .count li.current { color: #fff; opacity: 0.7; font-weight: 700; background: #f60 } </style></head><body><div id="box"> <ul class="list"> <li class="current" style="opacity: 1;"><img src="img/images04/01.jpg" width="490" height="170"></li> <li style="opacity: 0;"><img src="img/images04/02.jpg" width="490" height="170"></li> <li style="opacity: 0;"><img src="img/images04/03.jpg" width="490" height="170"></li> <li style="opacity: 0;"><img src="img/images04/04.jpg" width="490" height="170"></li> <li style="opacity: 0;"><img src="img/images04/05.jpg" width="490" height="170"></li> </ul> <ul class="count"> <li class="current">1</li> <li class="">2</li> <li class="">3</li> <li class="">4</li> <li class="">5</li> </ul></div><script> var box=document.getElementById('box'); var uls=document.getElementsByTagName('ul'); var imgs=uls[0].getElementsByTagName('li'); var btn=uls[1].getElementsByTagName('li'); var i=index=0; //中間量，統(tǒng)一聲明； var play=null; console.log(box,uls,imgs,btn);//獲取正確 //圖片切換, 淡入淡出效果我是用（transition: opacity 0.8s linear）做的,不糾結(jié)、簡(jiǎn)單 在css里面 function show(a){ //方法定義的是當(dāng)傳入一個(gè)下標(biāo)時(shí)，按鈕和圖片做出對(duì)的反應(yīng) for(i=0;i<btn.length;i++ ){ btn[i].className=''; //很容易看懂吧？每個(gè)按鈕都先設(shè)置成看不見(jiàn)，然后把當(dāng)前按鈕設(shè)置成可見(jiàn)。 btn[a].className='current'; } for(i=0;i<imgs.length;i++){ //把圖片的效果設(shè)置和按鈕相同 imgs[i].style.opacity=0; imgs[a].style.opacity=1; } } //切換按鈕功能，響應(yīng)對(duì)應(yīng)圖片 for(i=0;i<btn.length;i++){ btn[i].index=i; //不知道你有沒(méi)有發(fā)現(xiàn)，循環(huán)里的方法去調(diào)用循環(huán)里的變量體i，會(huì)出現(xiàn)調(diào)到的不是i的變動(dòng)值的問(wèn)題。所以我先在循環(huán)外保存住 btn[i].onmouseover=function(){ show(this.index); clearInterval(play); //這就是最后那句話追加的功能 } } //自動(dòng)輪播方法function autoPlay(){ play=setInterval(function(){ //這個(gè)paly是為了保存定時(shí)器的，變量必須在全局聲明 不然其他方法調(diào)不到 或者你可以調(diào)用auto.play 也許可以但是沒(méi)時(shí)間試了 index++; index>=imgs.length&&(index=0);//可能有優(yōu)先級(jí)問(wèn)題，所以用了括號(hào)，沒(méi)時(shí)間測(cè)試了。 show(index); },1000) } autoPlay();//馬上調(diào)用，我試過(guò)用window.onload調(diào)用這個(gè)方法，但是調(diào)用之后影響到了其他方法，使用autoPlay所以只能這樣調(diào)用了 //div的鼠標(biāo)移入移出事件 box.onmouseover=function(){ clearInterval(play); }; box.onmouseout=function(){ autoPlay(); }; //按鈕下標(biāo)也要加上相同的鼠標(biāo)事件，不然圖片停止了，定時(shí)器沒(méi)停，會(huì)突然閃到很大的數(shù)字上。 貌似我可以直接追加到之前定義事件中。</script></body></html>希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
