輪播圖就是讓圖片每隔幾秒自動(dòng)滑動(dòng)，達(dá)到圖片輪流播放的效果。輪播圖從效果來(lái)說(shuō)有滑動(dòng)式的也有漸入式的，滑動(dòng)式的輪播圖就是圖片從左向右滑入的效果，漸入式的輪播圖就是圖片根據(jù)透明度漸漸顯示的效果，這里說(shuō)的是實(shí)現(xiàn)第一種效果的方法。

原理

相同大小的圖片并成一列，但只顯示其中一張圖片，其余的隱藏，通過(guò)修改left值來(lái)改變顯示的圖片。

html部分

nav為總?cè)萜?#xff0c;第一個(gè)ul列表#index為小圓點(diǎn)列表，鼠標(biāo)覆蓋哪個(gè)小圓點(diǎn)就顯現(xiàn)第幾張圖片，on是一個(gè)給小圓點(diǎn)添加背景顏色屬性的類；第二個(gè)ul列表#img為圖片列表。

Carousel Figure

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通過(guò)改變邊框樣式構(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;/*不給寬高無(wú)法移動(dòng)*/

height: 405px;

position: absolute;/*不定義absolute，js無(wú)法設(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í)“劃過(guò)”的效果是將距離分成好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

dist=Math.ceil(Math.abs(y_final-y_pos)/10);//分10次移動(dòng)完成

y_pos = y_pos

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都沒(méi)有背景，然后在對(duì)當(dāng)前的li添加背景。

function moveIndex(list,num){//移動(dòng)小圓點(diǎn)

for(var i=0;i

if(list[i].className=='on'){//清除li的背景樣式

list[i].className='';

}

}

list[num].className='on';

}

圖片自動(dòng)輪播

將以下代碼直接寫(xiě)在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沒(méi)有絲毫的關(guān)系，只有相同的名字。

for(var i=0;i

list[i].index=i;//這里是設(shè)置index屬性，和index變量沒(méi)有任何聯(lián)系

list[i].οnmοuseοver= function () {

var clickIndex=parseInt(this.index);

moveElement(img,-720*clickIndex,0,20);

index=clickIndex;

moveIndex(list,index);

clearInterval(timer);

};

list[i].οnmοuseοut= function () {//移開(kāi)后繼續(xù)輪播

play();

};

}

總結(jié)

輪播圖的實(shí)現(xiàn)并不復(fù)雜，主要在于將圖片的移動(dòng)行為和小圓點(diǎn)的移動(dòng)行為分開(kāi)，這樣就比較容易實(shí)現(xiàn)。這個(gè)輪播圖其實(shí)還是有點(diǎn)問(wèn)題的，從最后一幅圖滑向第一個(gè)時(shí)滑動(dòng)的距離較長(zhǎng)，其實(shí)也很好解決，將滑動(dòng)的方式改一下，這里是根據(jù)-720*index來(lái)計(jì)算最終的left值，而index是將圖片的移動(dòng)和小圓點(diǎn)的移動(dòng)綁到一起，將滑動(dòng)方式改成現(xiàn)在的offsetLeft+(-720)，圖片的移動(dòng)就可以與index值無(wú)關(guān)，然后在html文件增加一幅圖片：

然后在滑到最后一幅圖片時(shí)，迅速的將偏移量賦值0，變成第一幅，兩幅圖一樣，無(wú)法分辨其中變化，即可達(dá)到無(wú)縫連接。

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';

}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

總結(jié)

以上是生活随笔為你收集整理的php如何从左往右轮播,js实现从左向右滑动式轮播图效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。