js實(shí)現(xiàn)從左向右滑動式輪播圖效果
輪播圖就是讓圖片每隔幾秒自動滑動，達(dá)到圖片輪流播放的效果。輪播圖從效果來說有滑動式的也有漸入式的，滑動式的輪播圖就是圖片從左向右滑入的效果，漸入式的輪播圖就是圖片根據(jù)透明度漸漸顯示的效果，這里說的是實(shí)現(xiàn)第一種效果的方法。
原理
相同大小的圖片并成一列，但只顯示其中一張圖片，其余的隱藏，通過修改left值來改變顯示的圖片。
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" >
</head>
<body>
<!--從左向右滑動-->
<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列表相對于nav是絕對定位的，#img的長度必須設(shè)置為所有圖片的總寬度，這樣圖片才可以并列一排顯示；
總?cè)萜鱪av的寬度必須設(shè)置為圖片的寬度720px,即只能顯示一張圖片，超出寬度的部分隱藏，即overflow: hidden；
小圓點(diǎn)列表應(yīng)該在圖片列表上面顯示，故設(shè)置#img的z-index：-1；
小圓點(diǎn)列表是由一系列的li通過改變邊框樣式構(gòu)成，故只需改變背景顏色即可達(dá)到移動小圓點(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;/*不給寬高無法移動*/
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部分
圖片移動函數(shù)moveElement()
moveElement函數(shù)需要獲取圖片現(xiàn)在的位置以及目標(biāo)位置并計(jì)算它們之間的差距進(jìn)行移動，可以用offsetLeft和offsetTop獲取圖片現(xiàn)在的位置。圖片移動時(shí)“劃過”的效果是將距離分成好10次進(jìn)行移動，即利用setTimeOut函數(shù)，然而為了防止鼠標(biāo)懸停，需調(diào)用clearTimeout()函數(shù)，代碼如下：
function moveElement(ele,x_final,y_final,interval){//ele為元素對象
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){//先判斷是否需要移動
return;
}
dist=Math.ceil(Math.abs(x_final-x_pos)/10);//分10次移動完成
x_pos = x_pos<x_final ? x_pos+dist : x_pos-dist;
dist=Math.ceil(Math.abs(y_final-y_pos)/10);//分10次移動完成
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次移動，自調(diào)用10次
moveElement(ele,x_final,y_final,interval);
},interval)
}
小圓點(diǎn)移動函數(shù)moveIndex()
移動小圓點(diǎn)的實(shí)質(zhì)是移動設(shè)置的背景顏色的類on，原理是先判斷哪個(gè)li上有背景顏色，有則去掉，讓所有的li都沒有背景，然后在對當(dāng)前的li添加背景。
function moveIndex(list,num){//移動小圓點(diǎn)
for(var i=0;i<list.length;i++){
if(list[i].className=='on'){//清除li的背景樣式
list[i].className='';
}
}
list[num].className='on';
}
圖片自動輪播
將以下代碼直接寫在window.onload中即可。
這里需要定義一個(gè)變量index，表示移動到第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(){//一直向右移動，最后一個(gè)之后返回
index+=1;
if(index>=list.length){
index=0;
}
moveIndex(list,index);
moveElement(img,-720*index,0,20);
};
圖片的自動輪播需要用到setInterval()函數(shù)，讓程序每隔幾秒自動調(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)出對應(yīng)的圖片這一效果，需要知道鼠標(biāo)覆蓋的是哪個(gè)小圓點(diǎn)，這里給每個(gè)li都添加一個(gè)自定的屬性index，使該屬性的值為對應(yīng)的小圓點(diǎn)的序號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è)小圓圈，圖片就移動到哪個(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ù)雜，主要在于將圖片的移動行為和小圓點(diǎn)的移動行為分開，這樣就比較容易實(shí)現(xiàn)。這個(gè)輪播圖其實(shí)還是有點(diǎn)問題的，從最后一幅圖滑向第一個(gè)時(shí)滑動的距離較長，其實(shí)也很好解決，將滑動的方式改一下，這里是根據(jù)-720*index來計(jì)算最終的left值，而index是將圖片的移動和小圓點(diǎn)的移動綁到一起，將滑動方式改成現(xiàn)在的offsetLeft+（-720），圖片的移動就可以與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';
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
基于JavaScript偽隨機(jī)正態(tài)分布代碼實(shí)例
這篇文章主要介紹了基于JavaScript偽隨機(jī)正態(tài)分布代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
選擇并轉(zhuǎn)移導(dǎo)航菜單的方法有很多，本例使用js來實(shí)現(xiàn)選擇并轉(zhuǎn)移導(dǎo)航菜單,需要的朋友可以參考下2014-08-08
js和jquery分別驗(yàn)證單選框、復(fù)選框、下拉框
這篇文章主要為大家詳細(xì)介紹了js和jquery分別驗(yàn)證單選框、復(fù)選框、下拉框的具體代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-12-12
eslint+prettier統(tǒng)一代碼風(fēng)格的實(shí)現(xiàn)方法
這篇文章主要介紹了eslint+prettier 統(tǒng)一代碼風(fēng)格的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
JavaScript調(diào)用后臺的三種方法實(shí)例
這篇文章介紹了JavaScript調(diào)用后臺的三種方法實(shí)例，有需要的朋友可以參考一下2013-10-10
JS使用正則表達(dá)式獲取小括號、中括號及花括號內(nèi)容的方法示例
這篇文章主要介紹了JS使用正則表達(dá)式獲取小括號、中括號及花括號內(nèi)容的方法,涉及javascript針對三種括號正則匹配的相關(guān)操作技巧,需要的朋友可以參考下2018-06-06
點(diǎn)擊彈出層，點(diǎn)擊后彈出一個(gè)登錄層，在這個(gè)層內(nèi)的內(nèi)容調(diào)用了一個(gè)示例頁面2014-03-03
探究JavaScript原型數(shù)據(jù)共享與方法共享實(shí)現(xiàn)
這篇文章主要介紹了探究JavaScript原型數(shù)據(jù)共享與方法共享實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
Node.js實(shí)戰(zhàn) 建立簡單的Web服務(wù)器
本章我們同樣通過實(shí)戰(zhàn)的演練，利用Node.js建立一個(gè)簡單的Web服務(wù)器2012-03-03
js實(shí)現(xiàn)簡單的倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡單的倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01