讓圖片跳躍起來javascript圖片輪播特效_javascript技巧

這篇文章來看圖片按照間隔時間進行切換.

我們先把結(jié)構(gòu)代碼完成,這個我就不做詳細的講解了.看效果

代碼如下:

 
 
 


 
 
 
 
  
 
  
 
  
 
 

 
 1 
 
 2 
 
 3 
 
 上一張
 下一張
 

好的,現(xiàn)在我們來通過JS控制圖片的跳轉(zhuǎn).

首先我們需要找到圖片所在的位置,這里我們是通過ul來進行布局的所以首先得找到UL下的LI的數(shù)目

接著讓圖片一張一張的展示,我們使用了視窗的模式,就是遮罩層的模式.#slider是一個視窗,ul是視窗外的景色,而ul得景色是橫向排版的

然后就是讓外面的景色顯示為視窗的大小,也就是讓每一張圖片作為每一次的視窗景色,這里就是控制圖片的大小要與視窗同等大小.

上面講解的是一個概念,也就是布局的處理,下面我們JS的控制了,要實現(xiàn)圖片間隔的顯示不同.我們就需要用到JS的setInterval或者setTimeout.這里我們使用setInterval(因為這個用起來方便.)

每跳轉(zhuǎn)一次,我們控制的是UL的position的left,這樣就可以讓ul下的景色,在每一次都是顯示不一樣,而這個left是根據(jù)視窗的寬度來決定,第一張left當然是-800 * 0 ,第二種就是 -800*1,第三種是-800*2...依次類推.那我們就可以得出下面的代碼

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

讓圖片跳躍起來javascript圖片輪播特效_javascript技巧

讓圖片跳躍起來javascript圖片輪播特效_javascript技巧:圖片輪播效果,在現(xiàn)在的網(wǎng)站的首頁,差不多是必備的效果顯示. 所以我從三個方面來講解這一效果的簡單實現(xiàn). 圖片跳動起來 圖片序列控制的實現(xiàn) 前后按鈕控制的實現(xiàn) 這篇文章來看圖片按照間隔時間進行切換. 我們先把結(jié)構(gòu)代碼完成,這個我就不做詳細的講解了.看

推薦度：

點擊下載本文 文檔為doc格式