現在很多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函數的文章)
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。