原生js實現輪播圖實例教程,原生js輪播圖實現原理

本文目錄一覽：

• 1、用原生JS實現小米內容部分的類似輪播圖的部分
• 2、js如何製作圖片輪播
• 3、js圖片輪播點擊
• 4、JS製作輪播圖

用原生JS實現小米內容部分的類似輪播圖的部分

思路一 絕對定位+透明度

HTML示例代碼

CSS示例代碼

JS示例代碼

思路二 絕對定位+left

HTML示例代碼

CSS示例代碼

JS示例代碼

思路三 絕對定位+left+DOM操作

HTML示例代碼

CSS示例代碼

JS示例代碼

思路一 絕對定位+透明度

原理：首先，將所有輪播圖以絕對定位的方式定位父元素的相同位置；接著，實現上下鍵按鈕修改active的下標；最後，將所有圖片透明度重置為0，而被激活的圖片透明度設置為1；

優點：實現最為簡單，代碼量小，圖片過渡自然；

缺點：沒有左右滑動效果



HTML示例代碼

div id=’container’ ul id=’img-list’ liimg src=”//li liimg src=”//li liimg src=”//li liimg src=”//li /ul a id=’pre-btn’span/span/a a id=’next-btn’span/span/a /div

1

2

3

4

5

6

7

8

9

10

CSS示例代碼

js如何製作圖片輪播

工具/材料

Sublime Text

01

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

02

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

03

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

04

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

05

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

js圖片輪播點擊

實現輪播圖思路

布局：

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

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

定時器無縫輪播：

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

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

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

①清除掉定時器；

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

③開啟下一輪輪播。

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

右邊按鈕點擊無縫輪播：

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

左邊按鈕點擊無縫輪播：

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

指示燈點擊無縫輪播：

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

JS製作輪播圖

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

工具/材料

Sublime Text

01

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

02

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

03

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

04

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