您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)js怎么實(shí)現(xiàn)從左向右滑動(dòng)式輪播圖效果的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
1、js屬于一種解釋性腳本語言;2、在絕大多數(shù)瀏覽器的支持下,js可以在多種平臺(tái)下運(yùn)行,擁有著跨平臺(tái)特性;3、js屬于一種弱類型腳本語言,對(duì)使用的數(shù)據(jù)類型未做出嚴(yán)格的要求,能夠進(jìn)行類型轉(zhuǎn)換,簡(jiǎn)單又容易上手;4、js語言安全性高,只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互,從而有效地防止數(shù)據(jù)的丟失;5、基于對(duì)象的腳本語言,js不僅可以創(chuàng)建對(duì)象,也能使用現(xiàn)有的對(duì)象。
輪播圖就是讓圖片每隔幾秒自動(dòng)滑動(dòng),達(dá)到圖片輪流播放的效果。輪播圖從效果來說有滑動(dòng)式的也有漸入式的,滑動(dòng)式的輪播圖就是圖片從左向右滑入的效果,漸入式的輪播圖就是圖片根據(jù)透明度漸漸顯示的效果,這里說的是實(shí)現(xiàn)第一種效果的方法。
原理
相同大小的圖片并成一列,但只顯示其中一張圖片,其余的隱藏,通過修改left值來改變顯示的圖片。
點(diǎn)擊查看效果
html部分
nav為總?cè)萜鳎谝粋€(gè)ul列表#index為小圓點(diǎn)列表,鼠標(biāo)覆蓋哪個(gè)小圓點(diǎn)就顯現(xiàn)第幾張圖片,on是一個(gè)給小圓點(diǎn)添加背景顏色屬性的類;第二個(gè)ul列表#img為圖片列表。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Carousel Figure</title> <link rel="stylesheet" href="style.css" rel="external nofollow" > </head> <body> <!--從左向右滑動(dòng)--> <nav> <ul id="index"> <li class="on"></li> <li></li> <li></li> <li></li> <li></li> </ul> <ul id="img"> <li><img src="../images/img1.jpg" alt="img1"></li> <li><img src="../images/img2.jpg" alt="img2"></li> <li><img src="../images/img3.jpg" alt="img3"></li> <li><img src="../images/img4.jpg" alt="img4"></li> <li><img src="../images/img5.jpg" alt="img5"></li> </ul> </nav> <script src="script.js"></script> </body> </html>
css部分
圖片尺寸均為720*405,這里需要注意以下幾點(diǎn):
ul#img列表相對(duì)于nav是絕對(duì)定位的,#img的長(zhǎng)度必須設(shè)置為所有圖片的總寬度,這樣圖片才可以并列一排顯示;
總?cè)萜鱪av的寬度必須設(shè)置為圖片的寬度720px,即只能顯示一張圖片,超出寬度的部分隱藏,即overflow: hidden;
小圓點(diǎn)列表應(yīng)該在圖片列表上面顯示,故設(shè)置#img的z-index:-1;
小圓點(diǎn)列表是由一系列的li通過改變邊框樣式構(gòu)成,故只需改變背景顏色即可達(dá)到移動(dòng)小圓點(diǎn)的效果。
*{ margin:0; padding:0; } nav{ width: 720px; height: 405px; margin:20px auto; overflow: hidden; position: relative; } #index{ position: absolute; left:320px; bottom: 20px; } #index li{ width:8px; height: 8px; border: solid 1px gray; border-radius: 100%; background-color: #eee; display: inline-block; } #img{ width: 3600px;/*不給寬高無法移動(dòng)*/ height: 405px; position: absolute;/*不定義absolute,js無法設(shè)置left和top*/ z-index: -1; } #img li{ width: 720px; height: 405px; float: left; } #index .on{ background-color: black; }
JS部分
圖片移動(dòng)函數(shù)moveElement()
moveElement函數(shù)需要獲取圖片現(xiàn)在的位置以及目標(biāo)位置并計(jì)算它們之間的差距進(jìn)行移動(dòng),可以用offsetLeft和offsetTop獲取圖片現(xiàn)在的位置。圖片移動(dòng)時(shí)“劃過”的效果是將距離分成好10次進(jìn)行移動(dòng),即利用setTimeOut函數(shù),然而為了防止鼠標(biāo)懸停,需調(diào)用clearTimeout()函數(shù),代碼如下:
function moveElement(ele,x_final,y_final,interval){//ele為元素對(duì)象 var x_pos=ele.offsetLeft; var y_pos=ele.offsetTop; var dist=0; if(ele.movement){//防止懸停 clearTimeout(ele.movement); } if(x_pos==x_final&&y_pos==y_final){//先判斷是否需要移動(dòng) return; } dist=Math.ceil(Math.abs(x_final-x_pos)/10);//分10次移動(dòng)完成 x_pos = x_pos<x_final ? x_pos+dist : x_pos-dist; dist=Math.ceil(Math.abs(y_final-y_pos)/10);//分10次移動(dòng)完成 y_pos = y_pos<y_final ? y_pos+dist : y_pos-dist; ele.style.left=x_pos+'px'; ele.style.top=y_pos+'px'; ele.movement=setTimeout(function(){//分10次移動(dòng),自調(diào)用10次 moveElement(ele,x_final,y_final,interval); },interval) }
小圓點(diǎn)移動(dòng)函數(shù)moveIndex()
移動(dòng)小圓點(diǎn)的實(shí)質(zhì)是移動(dòng)設(shè)置的背景顏色的類on,原理是先判斷哪個(gè)li上有背景顏色,有則去掉,讓所有的li都沒有背景,然后在對(duì)當(dāng)前的li添加背景。
function moveIndex(list,num){//移動(dòng)小圓點(diǎn) for(var i=0;i<list.length;i++){ if(list[i].className=='on'){//清除li的背景樣式 list[i].className=''; } } list[num].className='on'; }
圖片自動(dòng)輪播
將以下代碼直接寫在window.onload中即可。
這里需要定義一個(gè)變量index,表示移動(dòng)到第index(0~n-1,n為li的個(gè)數(shù))張圖片。
var img=document.getElementById('img'); var list=document.getElementById('index').getElementsByTagName('li'); var index=0;//這里定義index是變量,不是屬性 var nextMove=function(){//一直向右移動(dòng),最后一個(gè)之后返回 index+=1; if(index>=list.length){ index=0; } moveIndex(list,index); moveElement(img,-720*index,0,20); };
圖片的自動(dòng)輪播需要用到setInterval()函數(shù),讓程序每隔幾秒自動(dòng)調(diào)用nextMove()函數(shù):
var play=function(){ timer=setInterval(function(){ nextMove(); },2500); };
鼠標(biāo)覆蓋小圓點(diǎn)效果
要實(shí)現(xiàn)鼠標(biāo)覆蓋哪個(gè)小圓點(diǎn),就呈現(xiàn)出對(duì)應(yīng)的圖片這一效果,需要知道鼠標(biāo)覆蓋的是哪個(gè)小圓點(diǎn),這里給每個(gè)li都添加一個(gè)自定的屬性index,使該屬性的值為對(duì)應(yīng)的小圓點(diǎn)的序號(hào)i(0~n-1,n為li的個(gè)數(shù)),這樣每次鼠標(biāo)覆蓋時(shí)只需獲取index屬性的值即可知道鼠標(biāo)覆蓋的是哪個(gè)小圓點(diǎn)。注意,該index屬性和變量index沒有絲毫的關(guān)系,只有相同的名字。
for(var i=0;i<list.length;i++){//鼠標(biāo)覆蓋上哪個(gè)小圓圈,圖片就移動(dòng)到哪個(gè)小圓圈,并停止 list[i].index=i;//這里是設(shè)置index屬性,和index變量沒有任何聯(lián)系 list[i].onmouseover= function () { var clickIndex=parseInt(this.index); moveElement(img,-720*clickIndex,0,20); index=clickIndex; moveIndex(list,index); clearInterval(timer); }; list[i].onmouseout= function () {//移開后繼續(xù)輪播 play(); }; }
總結(jié)
輪播圖的實(shí)現(xiàn)并不復(fù)雜,主要在于將圖片的移動(dòng)行為和小圓點(diǎn)的移動(dòng)行為分開,這樣就比較容易實(shí)現(xiàn)。這個(gè)輪播圖其實(shí)還是有點(diǎn)問題的,從最后一幅圖滑向第一個(gè)時(shí)滑動(dòng)的距離較長(zhǎng),其實(shí)也很好解決,將滑動(dòng)的方式改一下,這里是根據(jù)-720*index來計(jì)算最終的left值,而index是將圖片的移動(dòng)和小圓點(diǎn)的移動(dòng)綁到一起,將滑動(dòng)方式改成現(xiàn)在的offsetLeft+(-720),圖片的移動(dòng)就可以與index值無關(guān),然后在html文件增加一幅圖片:
<li><img src="../images/img1.jpg" alt="img1"></li> <li><img src="../images/img2.jpg" alt="img2"></li> <li><img src="../images/img3.jpg" alt="img3"></li> <li><img src="../images/img4.jpg" alt="img4"></li> <li><img src="../images/img5.jpg" alt="img5"></li> <li><img src="../images/img1.jpg" alt="img1"></li>
然后在滑到最后一幅圖片時(shí),迅速的將偏移量賦值0,變成第一幅,兩幅圖一樣,無法分辨其中變化,即可達(dá)到無縫連接。
if(x_pos==-3600){ ele.style.left='0'; ele.style.top='0'; }else{ ele.style.left=x_pos+'px'; ele.style.top=y_pos+'px'; }
感謝各位的閱讀!關(guān)于“js怎么實(shí)現(xiàn)從左向右滑動(dòng)式輪播圖效果”這篇文章就分享到這里了,希望以上內(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)容。