js實現輪播圖原理及示例（轉）
阿新 • • 發佈：2019-02-04
網上有很多的例子介紹，在這裡我所做的**無縫滾動**就是 通過改變元素的left值讓圖片呈現左右滾動的效果。
我們首先看一下 div+css 的結構樣式：
div+css程式碼
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<styletype="text/css">
*{
margin:0;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
展示效果如圖：
接下來我們要將js 程式碼 ，
再此之前 我們要明白，小圓點 1 2 3 並不是寫死的，它是根據ul li中的圖片張數來決定的 ，所以 我們要先把div中ol li中的程式碼去掉
要實現無縫滾動 就需要多一張圖片才行 ，即克隆第一張圖片，放到最後面。此時css佈局保留，div中只剩下：
<body>
<divid="scroll"class="scroll">
<divid="box"class="box">
<ulid="ul">
<li><imgsrc="images/1.jpg"width="500"height="200"></li>
<li><imgsrc="images/2.jpg"width="500"height="200"></li>
<li><imgsrc="images/3.jpg"width="500"height="200"></li>
<li><imgsrc="images/4.jpg"width="500"height="200"></li>
<li><imgsrc="images/5.jpg"width="500"height="200"></li>
</ul>
</div>
</div>
</body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
此時我們用js程式碼生成小圓點
var scroll = document.getElementById("scroll"); // 獲得大盒子
var ul = document.getElementById("ul"); // 獲得ul
var ulLis = ul.children;// 獲得ul的盒子 以此來生成ol中li的個數
var liWidth = ul.children[0].offsetWidth;// 獲得每個li的寬度
// 操作元素
// 因為要做無縫滾動，所以要克隆第一張，放到最後一張後面
// 1. 克隆元素
ul.appendChild(ul.children[0].cloneNode(true));
// 2.建立ol 和li
var ol = document.createElement("ol");//建立ol元素
scroll.appendChild(ol);// 把ol放到scroll盒子裡面去
for (var i=0;i<ulLis.length-1;i++) {
var li = document.createElement("li");// 建立li元素
li.innerHTML = i + 1;// 給li裡面新增文字 1 2 3 4 5
ol.appendChild(li);// 將li元素新增到ol裡面
}
ol.children[0].className = "current";// ol中的第一個li背景色為purple- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
此時ol li元素即小圓點建立完畢 我們接著用js做動畫
動畫部分包括：
1.滑鼠經過第幾個小圓點，就要展示第幾張圖片，並且小圓點的顏色也發生變化
2.圖片自動輪播，（這需要一個定時器）
3.滑鼠經過圖片，圖片停止自動播放（這需要清除定時器）
4.滑鼠離開圖片，圖片繼續自動輪播 （重新開始定時器）
這裡我們封裝了一個animate()動畫函式
// 動畫函式 第一個引數，代表誰動 第二個引數 動多少
// 讓圖片做勻速運動，勻速動畫的原理是 當前的位置 + 速度 即 offsetLeft + speed
functionanimate(obj,target){
// 首先清除掉定時器
clearInterval(obj.timer);
// 用來判斷 是+ 還是 - 即說明向左走還是向右走
var speed = obj.offsetLeft < target ? 15 : -15;
obj.timer = setInterval(function(){
var result = target - obj.offsetLeft;//它們的差值不會超過speed
obj.style.left = obj.offsetLeft + speed + "px";
// 有可能有小數的存在，所以在這裡要做個判斷
if (Math.abs(result) <= Math.abs(speed)) {
clearInterval(obj.timer);
obj.style.left = target + "px";
}
},10);
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
定時器 函式
var timer = null; // 輪播圖的定時器
var key = 0;// 控制播放的張數
var circle = 0;// 控制小圓點
timer = setInterval(autoplay,1000);// 自動輪播
functionautoplay(){
/*自動輪播時,要對播放的張數key進行一個判斷,如果播放的張數超過ulLis.length-1,
就要重頭開始播放. 因為我們克隆了第一張並將其放在最後面,所以我們要從第二張圖片開始播放*/
key++; // 先++
if(key > ulLis.length-1){// 後判斷
ul.style.left = 0; // 迅速調回
key = 1; // 因為第6張是第一張，所以播放的時候是從第2張開始播放
}
// 動畫部分
animate(ul,-key*liWidth);
// 小圓點circle 當顯示第幾張圖片是，對應的小圓點的顏色也發生變化
/*同理,對小圓點也要有一個判斷*/
circle++;
if (circle > olLis.length-1) {
circle = 0;
}
// 小圓點顏色發生變化
for (var i = 0 ; i < olLis.length;i++) {
// 先清除掉所用的小圓點類名
olLis[i].className = "";
}
// 給當前的小圓點 新增一個類名
olLis[circle].className = "current";
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
好啦，這裡我們展示了主要程式碼，具體程式碼，檢視這裡下載js實現輪播效果