網頁常見之輪播圖

   在網上訪問網頁最多見到的應該是輪播圖，通常會在首頁，如訪問量很高的淘寶，京東這些商城或不知道哪裏彈出來的廣告，

這些均可以看到圖片都不斷切換，圖片比文字更有誘惑別人的能力，一張優美的圖片，可讓人有點進出一睹的做用，而這就

已是達到作這個的做用了，但圖片佔位通常都是不小的，小圖很難讓人關注到，哪怎麼辦了，難道就讓圖片所有平鋪出來

嗎？有點很差吧。難道圖片多時也這樣幹，那這個站不是成了圖片展現的網站了嗎？客戶體驗也很差，因此輪播圖的做用就

出來了，佔一個圖片的位置，展現了多張圖片，還美化了網站，更加吸引眼球。

  如今進入主題：

  最簡單的輪播圖其實很簡單，只要會一點點的javascript的知識就能夠實現了。

  首先你須要懂得基礎的運算，如遞增

遞增例子：

var num=0;

num++;

就是增長一；

而後你要使用數組，用來模擬數據的使用的，就是存儲數據使用的。

使用其來儲存路徑。

例子：

var img=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg","img/8.jpg"];

數組的聲稱方式有幾種，本身去W3C裏查。

而後就是獲取元素，這個是有js知識的人，必需要懂得，全部不說。

獲取頁面的元素。

我這裏就不寫了HTML標籤，直接已經有的body標籤。

獲取其：

var doc=document.body;

而後就是函數了，這個裝載你所需變化代碼了。

function fn(){
doc.style.background="url("+img[num]+") no-repeat";
num++;
num%=img.length;
}

這裏教本身一招，不使用if判斷，使用模%，達到圖片循環。而循環的實現固然使用定時器啦~

定時器是一個神器。它讓函數自動運動起來，不須要手動操做。

定時器setInterval(函數，時間);   時間是毫秒爲單位的。

timer=setInterval(fn,2000);

這裏函數放進定時器時不要把雙括號「（）」加進去，雙括號的增長是本身執行函數的意思，而這裏你是要定時器

爲你執行。

這裏就把最簡單的定時器搞定了，若是要加一些很炫的功能，就要使用一些框架，或本身編寫運動框架了。

代碼的完整：

var img=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg","img/8.jpg"];

var num=0;

var doc=document.body;

function fn(){
doc.style.background="url("+img[num]+") no-repeat";
num++;
num%=img.length;
}

timer=setInterval(fn,2000);

 

還有更難的；

就下面這個，作起來而須要的基礎知識挺多的，但也脫離不了上面的這幾步的作法，其實就是在以上的

作法上添加別的基礎知識，運動框架。全部作輪播圖基本上使用以上的思路加拓展基本沒有問題。

這個num全局變量很重要。是全局。