js寫輪播圖網頁（js輪播圖的實現）

本文目錄一覽：

• 1、怎麼用js的原生寫法寫出來一個輪播圖呢？
• 2、簡單的HTML+js圖片輪播?
• 3、js裡面可以寫輪播圖嗎？

怎麼用js的原生寫法寫出來一個輪播圖呢？

1：排出一個版，包含上下切換的標識和圖片導航，所有圖片隱藏，給圖片第一張加一個class名，樣式設為顯示，圖片導航的第一個加一個class名，加上背景色；

2：獲取節點；

3：給向下切換寫一個點擊事件，點擊圖片切換到下一張，注意當圖片切換到最後一張的時候會報錯，所以必須要判斷一下，當圖片切換到最後一張的時候在，再次擊會切換到第一張；

4：給向上切換寫一個點擊事件，注意當圖片切換到第一張之後會報錯，所以必須要判斷一下，當圖片切換到第一的時候，再次點擊會切換到最後張，循環起來；

5：寫一個定時器，定時器的播放順序和向下切換一致，可以封裝一個函數方便調用；

6：寫鼠標劃入事件，清除定時器；

7：寫鼠標移出事件，定時器繼續運行；

8：圖片導航的點擊事件

點擊事件click

定時器setlnterval（）

if判斷

for（）循環

簡單的HTML+js圖片輪播?

h5代碼：

div id=”wrap”

ul id=”list”

li10/li

li9/li

li8/li

li7/li

li6/li

li5/li

li4/li

li3/li

li2/li

li1/li

/ul

/div

css代碼：

style type=”text/css”

@-webkit-keyframes move{

0%{left:-500px;}

100%{left:0;}

}

#wrap{width:600px;height:130px;border:1px solid #000;position:relative;margin:100px auto;

overflow: hidden;}

#list{position:absolute;left:0;top:0;padding:0;margin:0;

-webkit-animation:5s move infinite linear;width:200%;}

#list li{list-style:none;width:120px;height:130px;border:1px solid red;background: pink;

color:#fff;text-align: center;float:left;font:normal 50px/2.5em ‘微軟雅黑’;}

#wrap:hover #list{-webkit-animation-play-state:paused;}

/style

擴展資料：

輪播圖就是一種網站在介紹自己的主打產品或重要信息的傳播方式。說的簡單點就是將承載着重要信息的幾張圖片，在網頁的某一部位進行輪流的呈現，從而做到讓瀏覽者很快的了解到網站想要表達的主要信息。以及各種新聞網站的頭版頭條都是用這種方式呈現的重要信息。

輪播圖的實現方式：例如：有5張輪播的圖片，每張圖片的寬度為1024px、高度為512px.那麼輪播的窗口大小就應該為一張圖片的尺寸，即為：1024×512。之後將這5張圖片0px水平相接組成一張寬度為：5120px,高度依然為：512px。最後將這張合成後的大圖每次向左移動1024px即可實現輪播圖。

js裡面可以寫輪播圖嗎？

當然可以，css3就可以寫輪播，只不過js寫的輪播圖兼容性更好，使用順暢。

js實現輪播圖主要是搞懂原理，還有js知識就OK啦

圖片切換 是index值切換

換下一張 按鈕實現功能

到最後一張回到第一張

第一張往上翻回到最後一張

寫效果就OK啦