快捷導(dǎo)航

原生js圖片輪播效果實(shí)現(xiàn)代碼

更新時(shí)間：2016年10月19日 17:05:03 作者：張飛翔

這篇文章主要為大家詳細(xì)介紹了基于原生js實(shí)現(xiàn)圖片輪播效果的具體代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

現(xiàn)在很多javascript的插件都可以實(shí)現(xiàn)圖片輪播的功能，這篇文章，主要是通過(guò)這個(gè)domo來(lái)解析javascript圖片輪播的原理。
老規(guī)矩，先上代碼。至于代碼中的圖片，隨便找三張即可，最核心的還是理解其思想。

html：

<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8" /> 
 <title>滾動(dòng)圖</title> 
 <link rel="stylesheet" type="text/css" href="css/scroll.css"/> 
 </head> 
 <body> 
 <div id="wrapper"> 
  <div id="box"> 
  <img src="img/banner0.png"/> 
  <img src="img/banner1.png"/> 
  <img src="img/banner2.png"/> 
  </div> 
  <div id="pointer"> 
  <span class="active"></span> 
  <span></span> 
  <span></span> 
  </div> 
 </div> 
 <script src="js/scroll.js" type="text/javascript" charset="utf-8"></script> 
 </body> 
</html>

css:

*{ 
 margin: 0; 
 padding: 0; 
} 
#wrapper{ 
 position: relative; 
 width: 1200px; 
 margin: 50px auto; 
 overflow: hidden; 
} 
#pointer{ 
 clear: both; 
 position: absolute; 
 right: 500px; 
 bottom: 15px; 
 width: 180px; 
 height: 2px; 
} 
#pointer span{ 
 display: block; 
 box-sizing: border-box; 
 float: left; 
 width: 50px; 
 height: 1.5px; 
 margin-right: 10px; 
 border-radius: .5px; 
 background: #fff; 
 opacity: .5; 
 -webkit-opacity: .5; 
 -moz-opacity: .5; 
 filter:alpha(opacity=50); 
} 
#pointer .active{ 
 opacity: .8; 
 -webkit-opacity: .8; 
 -moz-opacity: .8; 
 filter:alpha(opacity=80); 
} 
#box{ 
 position: relative; 
 width: 3600px; 
 clear: both; 
} 
img{ 
 display: block; 
 float: left; 
 width: 1200px; 
 height: 337px; 
}

javascript:

window.onload = function(){ 
 //獲取裝圖片的盒子 
 var box = document.getElementById('box'); 
 //獲取裝頁(yè)碼的盒子 
 var pointer = document.getElementById('pointer'); 
 //獲取盒子中的所有圖片 
 var imglist = box.getElementsByTagName('img') 
 //獲取盒子中的所有頁(yè)碼 
 var pointerList = pointer.getElementsByTagName('span'); 
 //圖片的寬度,正負(fù)用于左右的循環(huán) 
 var n = -1200; 
 //增加一倍的圖片用于循環(huán) 
 box.innerHTML = box.innerHTML+box.innerHTML; 
 //設(shè)置盒子的寬 
 box.style.width = imglist[0].offsetWidth*imglist.length+"px"; 
 var timer = null; 
 timer = setInterval(function(){ 
 scroll(box,n,pointerList); 
 },3000); 
 box.onmouseover = function(){ 
 clearInterval(timer); 
 } 
 pointer.onmouseover = function(){ 
 clearInterval(timer); 
 } 
 box.onmouseout = function(){ 
 timer = setInterval(function (){ 
//  console.log(new Date()); 
  scroll(box,n,pointerList); 
 },3000); 
 } 
 //設(shè)置頁(yè)碼的點(diǎn)擊事件 
 for(var i=0;i<pointerList.length;i++){ 
 pointerList[i].index=i;//設(shè)置一個(gè)參數(shù)，用下面調(diào)用某個(gè)頁(yè)碼 
 //如果不設(shè)置參數(shù)，在調(diào)用頁(yè)碼的時(shí)候會(huì)直接調(diào)用最后一個(gè)，因?yàn)槲覀兪褂昧搜h(huán) 
 pointerList[i].onclick=function (){ 
  for(var j=0;j<pointerList.length;j++){ 
  pointerList[j].className='';//清空激活的class 
  } 
  move(box,n*(this.index));//移動(dòng)圖片 
  this.className='active';//激活點(diǎn)擊的頁(yè)碼 
 } 
 } 
 
} 
/** 
 * 循環(huán)滾動(dòng)函數(shù) 
 * @param {Object} box 
 * @param {Object} n 
 */ 
function scroll(box,n,page){ 
 //判斷是否到達(dá)臨界點(diǎn)，即box的中間部分 
 if(box.offsetLeft<=-box.offsetWidth/2){ 
 box.style.left = "0px";//重新從頭開(kāi)始 
 console.log('0'); 
 } 
 if(box.offsetLeft%n!=0){ 
 //因?yàn)樵谖覀兦袚Q瀏覽器標(biāo)簽頁(yè)或者切換去其他軟件界面的時(shí)候， 
 //會(huì)影響到setInterval,有時(shí)候setInterval會(huì)增加好幾秒，在這里我們必須加一個(gè)判斷 
 //只有當(dāng)它走完了一個(gè)整個(gè)的圖片寬度時(shí)，我們才進(jìn)行下一次滾動(dòng)。 
 } 
 else{ 
 pageScroll(box,n,page); 
 move(box,n+box.offsetLeft); 
 } 
} 
/** 
 * 滾動(dòng)頁(yè)碼函數(shù) 
 * @param {Object} box 
 * @param {Object} n 
 * @param {Object} page 
 */ 
function pageScroll(box,n,page){ 
 //直接通過(guò)圖片盒子的定位判斷頁(yè)碼值，但是此時(shí)的頁(yè)碼值是滾動(dòng)之前的，所以后面的值要+1使用 
 var index = Math.abs(box.offsetLeft/n); 
 console.log(index); 
 for(var i=0;i<page.length;i++){ 
 page[i].className=''; 
 } 
 //判斷是不是最后一頁(yè)，是最后一頁(yè)的話+1要變成0； 
 if(index<page.length-1){ 
 page[index+1].className='active'; 
 } 
 else{ 
 page[0].className='active'; 
 } 
} 
 
/** 
 * 變速移動(dòng) 
 * @param {Object} ele 
 * @param {Object} target 
 */ 
function move(ele,target){ 
 clearInterval(ele.timer); 
 console.log(new Date()); 
 ele.timer = setInterval(function () { 
 var step = (target-ele.offsetLeft)/10; 
 step = step>0?Math.ceil(step):Math.floor(step); 
 if(target==ele.offsetLeft){ 
  console.log(new Date()); 
  clearInterval(ele.timer); 
 } 
 else{ 
  ele.style.left = ele.offsetLeft + step + "px"; 
 } 
 },30); 
}

html和css部分依舊比較簡(jiǎn)單，直接跳過(guò)。javascript部分的代碼注釋寫的也比較詳細(xì)，下面主要講解邏輯部分。
圖片滾動(dòng)的原理是利用setInterval函數(shù)進(jìn)行背景圖片的不斷循環(huán)。為了避免圖片循環(huán)的過(guò)程中出現(xiàn)間斷，首先是在javascript中進(jìn)行圖片的復(fù)制（增加一倍），然后當(dāng)?shù)竭_(dá)臨界點(diǎn)時(shí)，瞬間將圖片移動(dòng)到初始的位置，然后開(kāi)始下一輪循環(huán)。
在這個(gè)domo中，主要包含四個(gè)函數(shù)：

1、外層控制間隔時(shí)間的函數(shù)。這個(gè)比較容易理解，通過(guò)setInterval函數(shù)每隔幾秒循環(huán)執(zhí)行一次圖片滾動(dòng)的函數(shù)。
2、中間層滾動(dòng)函數(shù)。判斷圖片盒子是否到達(dá)臨界點(diǎn)，判斷當(dāng)前狀態(tài)是否符合進(jìn)入下一次滾動(dòng)（這個(gè)條件主要是為了防止切換界面對(duì)setInterval函數(shù)的影響，具體原因在最后）。
3、中間層頁(yè)碼滾動(dòng)函數(shù)。基本沒(méi)有難點(diǎn)，主要是理解頁(yè)碼為什么+1即可。
4、圖片滾動(dòng)函數(shù)。這個(gè)在之前寫過(guò)的一篇文章有詳細(xì)講解，不再贅述，參考：http://www.fzitv.net/article/95211.htm

最后，一點(diǎn)關(guān)于setInterval底層機(jī)制的擴(kuò)展。

我們內(nèi)層函數(shù)的執(zhí)行事件正常情況下為1-2s（測(cè)試過(guò)），而外層的循環(huán)需要3s才進(jìn)行一次，正常的情況是沒(méi)有問(wèn)題的。但是，當(dāng)你切換界面的時(shí)候，瀏覽器就會(huì)對(duì)setInterval函數(shù)產(chǎn)生影響，此時(shí)執(zhí)行事件的事件就會(huì)超過(guò)3面，在沒(méi)移動(dòng)結(jié)束的情況下開(kāi)啟另一個(gè)定時(shí)器進(jìn)行下一次圖片滾動(dòng)，所以就會(huì)發(fā)生錯(cuò)亂。

javascript是單線程的，當(dāng)你使用setInterval函數(shù)的時(shí)候并不是真正暫停，而是先掛起這個(gè)事件，繼續(xù)執(zhí)行下面的事件，而當(dāng)這個(gè)事件要執(zhí)行時(shí)，如果瀏覽器當(dāng)前沒(méi)有任務(wù)，那么它會(huì)立馬執(zhí)行，但是如果瀏覽器有任務(wù)，那么就會(huì)有一定的延遲，這也是為什么切換界面會(huì)對(duì)setInterval函數(shù)的時(shí)間產(chǎn)生影響。

（關(guān)于setInterval函數(shù)的理解如有錯(cuò)誤，歡迎指正！如果大家想要深入理解，也可以去一些大神的博客看一下setInterval函數(shù)的文章）

精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播

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

您可能感興趣的文章: