DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 原生js圖片輪播效果實現代碼
原生js圖片輪播效果實現代碼
編輯:關於JavaScript     

現在很多javascript的插件都可以實現圖片輪播的功能,這篇文章,主要是通過這個domo來解析javascript圖片輪播的原理。
老規矩,先上代碼。至於代碼中的圖片,隨便找三張即可,最核心的還是理解其思想。

html:

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="utf-8" /> 
  <title>滾動圖</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'); 
 //獲取裝頁碼的盒子 
 var pointer = document.getElementById('pointer'); 
 //獲取盒子中的所有圖片 
 var imglist = box.getElementsByTagName('img') 
 //獲取盒子中的所有頁碼 
 var pointerList = pointer.getElementsByTagName('span'); 
 //圖片的寬度,正負用於左右的循環 
 var n = -1200; 
 //增加一倍的圖片用於循環 
 box.innerHTML = box.innerHTML+box.innerHTML; 
 //設置盒子的寬 
 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); 
 } 
 //設置頁碼的點擊事件 
 for(var i=0;i<pointerList.length;i++){ 
  pointerList[i].index=i;//設置一個參數,用下面調用某個頁碼 
  //如果不設置參數,在調用頁碼的時候會直接調用最後一個,因為我們使用了循環 
  pointerList[i].onclick=function (){ 
   for(var j=0;j<pointerList.length;j++){ 
    pointerList[j].className='';//清空激活的class 
   } 
   move(box,n*(this.index));//移動圖片 
   this.className='active';//激活點擊的頁碼 
  } 
 } 
  
} 
/** 
 * 循環滾動函數 
 * @param {Object} box 
 * @param {Object} n 
 */ 
function scroll(box,n,page){ 
 //判斷是否到達臨界點,即box的中間部分 
 if(box.offsetLeft<=-box.offsetWidth/2){ 
  box.style.left = "0px";//重新從頭開始 
  console.log('0'); 
 } 
 if(box.offsetLeft%n!=0){ 
  //因為在我們切換浏覽器標簽頁或者切換去其他軟件界面的時候, 
  //會影響到setInterval,有時候setInterval會增加好幾秒,在這裡我們必須加一個判斷 
  //只有當它走完了一個整個的圖片寬度時,我們才進行下一次滾動。 
 } 
 else{ 
  pageScroll(box,n,page); 
  move(box,n+box.offsetLeft); 
 } 
} 
/** 
 * 滾動頁碼函數 
 * @param {Object} box 
 * @param {Object} n 
 * @param {Object} page 
 */ 
function pageScroll(box,n,page){ 
 //直接通過圖片盒子的定位判斷頁碼值,但是此時的頁碼值是滾動之前的,所以後面的值要+1使用 
 var index = Math.abs(box.offsetLeft/n); 
 console.log(index); 
 for(var i=0;i<page.length;i++){ 
  page[i].className=''; 
 } 
 //判斷是不是最後一頁,是最後一頁的話+1要變成0; 
 if(index<page.length-1){ 
  page[index+1].className='active'; 
 } 
 else{ 
  page[0].className='active'; 
 } 
} 
 
/** 
 * 變速移動 
 * @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部分依舊比較簡單,直接跳過。javascript部分的代碼注釋寫的也比較詳細,下面主要講解邏輯部分。
圖片滾動的原理是利用setInterval函數進行背景圖片的不斷循環。為了避免圖片循環的過程中出現間斷,首先是在javascript中進行圖片的復制(增加一倍),然後當到達臨界點時,瞬間將圖片移動到初始的位置,然後開始下一輪循環。
在這個domo中,主要包含四個函數:

1、外層控制間隔時間的函數。這個比較容易理解,通過setInterval函數每隔幾秒循環執行一次圖片滾動的函數。
2、中間層滾動函數。判斷圖片盒子是否到達臨界點,判斷當前狀態是否符合進入下一次滾動(這個條件主要是為了防止切換界面對setInterval函數的影響,具體原因在最後)。
3、中間層頁碼滾動函數。基本沒有難點,主要是理解頁碼為什麼+1即可。
4、圖片滾動函數。這個在之前寫過的一篇文章有詳細講解,不再贅述,參考:http://www.jb51.net/article/95211.htm

最後,一點關於setInterval底層機制的擴展。

我們內層函數的執行事件正常情況下為1-2s(測試過),而外層的循環需要3s才進行一次,正常的情況是沒有問題的。但是,當你切換界面的時候,浏覽器就會對setInterval函數產生影響,此時執行事件的事件就會超過3面,在沒移動結束的情況下開啟另一個定時器進行下一次圖片滾動,所以就會發生錯亂。

javascript是單線程的,當你使用setInterval函數的時候並不是真正暫停,而是先掛起這個事件,繼續執行下面的事件,而當這個事件要執行時,如果浏覽器當前沒有任務,那麼它會立馬執行,但是如果浏覽器有任務,那麼就會有一定的延遲,這也是為什麼切換界面會對setInterval函數的時間產生影響。

(關於setInterval函數的理解如有錯誤,歡迎指正!如果大家想要深入理解,也可以去一些大神的博客看一下setInterval函數的文章)

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved