js輪播圖代碼,JS輪播圖代碼html js 分離

本文目錄一覽：

• 1、js如何製作圖片輪播
• 2、怎麼用js的原生寫法寫出來一個輪播圖呢？
• 3、js實現輪播代碼怎麼寫？
• 4、JS製作輪播圖
• 5、簡單的HTML+js圖片輪播?
• 6、js圖片輪播點擊

js如何製作圖片輪播

工具/材料

Sublime Text

01

首先在Sublime Text下面準備一個html和5張圖片，圖片寬高為600px和400px，如下圖所示

02

然後在HTML頁面中布局輪播圖的結構，如下圖所示，主要包括圖片區域，圓形按鈕，左右箭頭

03

接下來需要給輪播圖頁面布局聲明一些樣式，請按照下圖所示的樣式代碼進行聲明

04

最後就是實現輪播圖的JS腳本功能，如下圖所示，主要包括前進，後退，自動播放的功能

05

最後運行頁面，你就會看到下圖所示的輪播圖效果，點擊圓圈或者左右箭頭可以切換輪播圖

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

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

2：獲取節點；

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

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

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

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

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

8：圖片導航的點擊事件

點擊事件click

定時器setlnterval（）

if判斷

for（）循環

js實現輪播代碼怎麼寫？

!DOCTYPE html

html

head

meta charset=”UTF-“

title最簡單的輪播廣告/title

style

body, div, ul, li {

margin: ;

padding: ;

}

ul {

list-style-type: none;

}

body {

background: #;

text-align: center;

font: px/px Arial;

}

#box {

position: relative;

width: px;

height: px;

background: #fff;

border-radius: px;

border: px solid #fff;

margin: px auto;

}

#box .list {

position: relative;

width: px;

height: px;

overflow: hidden;

border: px solid #ccc;

}

#box .list li {

position: absolute;

top: ;

left: ;

width: px;

height: px;

opacity: ;

transition: opacity .s linear

}

#box .list li.current {

opacity: ;

}

#box .count {

position: absolute;

right: ;

bottom: px;

}

#box .count li {

color: #fff;

float: left;

width: px;

height: px;

cursor: pointer;

margin-right: px;

overflow: hidden;

background: #F;

opacity: .;

border-radius: px;

}

#box .count li.current {

color: #fff;

opacity: .;

font-weight: ;

background: #f

}

/style

/head

body

div id=”box”

ul

li style=”opacity: ;”img src=”img/images/.jpg” width=”” height=””/li

li style=”opacity: ;”img src=”img/images/.jpg” width=”” height=””/li

li style=”opacity: ;”img src=”img/images/.jpg” width=”” height=””/li

li style=”opacity: ;”img src=”img/images/.jpg” width=”” height=””/li

li style=”opacity: ;”img src=”img/images/.jpg” width=”” height=””/li

/ul

ul

li/li

li class=””/li

li class=””/li

li class=””/li

li class=””/li

/ul

/div

script

var box=document.getElementById(‘box’);

var uls=document.getElementsByTagName(‘ul’);

var imgs=uls[].getElementsByTagName(‘li’);

var btn=uls[].getElementsByTagName(‘li’);

var i=index=; //中間量，統一聲明；

var play=null;

console.log(box,uls,imgs,btn);//獲取正確

//圖片切換, 淡入淡出效果我是用（transition: opacity .s linear）做的,不糾結、簡單 在css裡面

function show(a){    //方法定義的是當傳入一個下標時，按鈕和圖片做出對的反應

for(i=;ibtn.length;i++ ){

btn[i].className=”;  //很容易看懂吧？每個按鈕都先設置成看不見，然後把當前按鈕設置成可見。

btn[a].className=’current’;

}

for(i=;iimgs.length;i++){ //把圖片的效果設置和按鈕相同

imgs[i].style.opacity=;

imgs[a].style.opacity=;

}

}

//切換按鈕功能，響應對應圖片

for(i=;ibtn.length;i++){

btn[i].index=i; //不知道你有沒有發現，循環里的方法去調用循環里的變數體i，會出現調到的不是i的變動值的問題。所以我先在循環外保存住

btn[i].onmouseover=function(){

show(this.index);

clearInterval(play); //這就是最後那句話追加的功能

}

}

//自動輪播方法

function autoPlay(){

play=setInterval(function(){ //這個paly是為了保存定時器的，變數必須在全局聲明 不然其他方法調不到 或者你可以調用auto.play 也許可以但是沒時間試了

index++;

index=imgs.length(index=);//可能有優先順序問題，所以用了括弧，沒時間測試了。

show(index);

},)

}

autoPlay();//馬上調用，我試過用window.onload調用這個方法，但是調用之後影響到了其他方法，使用autoPlay所以只能這樣調用了

//div的滑鼠移入移出事件

box.onmouseover=function(){

clearInterval(play);

};

box.onmouseout=function(){

autoPlay();

};

//按鈕下標也要加上相同的滑鼠事件，不然圖片停止了，定時器沒停，會突然閃到很大的數字上。 貌似我可以直接追加到之前定義事件中。

/script

/body

/html

JS製作輪播圖

輪播圖是每個網站中必不可少的元素，那麼如何用JS製作輪播圖呢？下面我就給大家分享一下。

工具/材料

Sublime Text

01

首先需要在Sublime中創建HTML文檔，然後在文檔的body區域中加入如下圖所示的輪播圖內容

02

然後我們需要在style標籤中給所添加的輪播圖內容聲明樣式，如下圖所示

03

接下來我們就需要在script標籤中實現輪播圖的動畫腳本內容了，如下圖所示，注意script標籤的type類型一定要是javascript

04

最後我們運行界面程序，你就會看到如下圖所示的輪播圖了，點擊左右的箭頭和中間的圓點都可以進行輪播圖的切換

簡單的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圖片輪播點擊

實現輪播圖思路

布局：

1. 使用 flex 布局使子元素水平排列；

2. 子元素寬度設置100%，flex-shrink 設置為 0（這個屬性保證子元素不被壓縮）;

定時器無縫輪播：

輪播之前需要將首尾各添加一張圖片。其目的就是實現無縫輪播。

然後將父元素 left 向左移動一個屏幕寬度的距離。這樣才能讓第二張（因為首尾各添加了一張圖片，所以原先的第一張就變成了第二張）變成可視範圍的第一張。

輪播到最後一張圖片（這裡的最後一張指的是拼接的第一張）時；

①清除掉定時器；

②開啟臨界處理（重置父元素的left）；

③開啟下一輪輪播。

這裡是實現無縫輪播的關鍵；其目的是播放最後一張的同時，與第一張偷梁換柱。因為最後一張與第一張圖片相同，所以快速地改變其 left 用戶並無感知。並且同時開啟下一輪定時器，1.5s 之後執行第二張圖片播放。而這個 1.5s 之內就好了準備（清除當前定時器，重置父元素 left）。

右邊按鈕點擊無縫輪播：

邏輯同定時器無縫輪播類似，因為方向都是從右向左播放。無縫輪播的核心都是播放到最後一張時偷梁換柱（播放最後一張圖片的1.5s 同時，改變父元素 left 成初始值，負數的屏幕寬度）。

左邊按鈕點擊無縫輪播：

左邊按鈕無縫輪播的核心與以上差不多，唯一的區別就是當播放到第一張圖片時，開始偷梁換柱（播放第一張圖片的1.5s 同時，改變父元素 left 成最大值，負數的（屏幕寬度*（子元素個數-2）））。

指示燈點擊無縫輪播：

點擊第一張圖片時，同左邊按鈕點擊無縫輪播。點擊最後一張圖片時，同右邊按鈕點擊無縫輪播。