成品直播原始碼，輪播圖無縫切換以及自動懸停

成品直播原始碼，輪播圖無縫切換以及自動懸停

一、輪播圖需要實現左右無縫切換

輪播圖的動態切換

利用右外邊距或左外邊距的加減來操作整個放有圖片div的移動，同時利用setTimeout()函式和計時器實現自動切換，從而達到圖片無縫切換的效果

//得到圖片的集合
var imgs = document.getElementById('img_list').getElementsByTagName('li');
//得到小圓點的集合
var icons = document.getElementById('icon_list').getElementsByTagName('li');
//初始左外邊距預設為0px
var Left = 0;
//定義計時器
var timer;
run();
function run() {
//圖片切換到最後時，重新歸零。
if (Left <= -5120) {
img_list.style.marginLeft = "0px";
Left = 0;
}
//用n表示圖片切換和停留的時間，如果剛好顯示，停2000，否則以10的速度切換（Left持續-10，直到再次剛好顯示圖片）
var n = (Left % 1280 == 0 ? 2000 : 10);
changeimg();
m = Math.floor(-Left / 1280);//切換小圓點樣式的方法，此處暫且不提
changeicon(m);//切換小圓點樣式的方法，此處暫且不提
Left -= 10;
//重複執行run方法。實現一直輪播。
timer = setTimeout(run, n);
}
function changeimg() {
//切換圖片的方法、
img_list.style.marginLeft = Left + "px";
}

二、需要實現跳轉（放在圓點顯示對應圖片）

為小圓點新增監聽事件，當滑鼠放在圓點上時，呼叫clearTimeout()方法停止輪播，調整計時器引數到固定值，使左右邊距加減的滑動效果轉為直接跳轉到對應圖片的效果，並在滑鼠移出時重新啟動輪播setTimeout()

// 變數作用域兩種：全域性變數、區域性變數。js中函式內部可以讀取全域性變數，函式外部不能讀取函式內部的區域性變數。
// js鏈式作用域：子物件會一級一級向上尋找所有父物件的變數，反之不行。
// f2可以讀取f1中的變數，只要把f2作為返回值，就可以在f1外讀取f1內部變數
for (var i = 0; i < imgs.length; i++) {
//根據第幾個圖示片來判斷停止。正常來說，外部i訪問不到下面函式的值，用了閉包後就能夠讀取了
//閉包作用
// 1、讀取函式內部的變數
// 2、讓這些變數的值始終保持在記憶體中。不會再f1呼叫後被自動清除。
// 3、方便呼叫上下文的區域性變數。利於程式碼封裝。
// 原因：f1是f2的父函式，f2被賦給了一個全域性變數，f2始終存在記憶體中，f2的存在依賴f1，因此f1也始終存在記憶體中，不會在呼叫結束後，被垃圾回收機制回收。
// 所以此處的i的值實際上為內部函式的i的值
//閉包()(i)
(function(i) {
imgs[i].onmousemove = function() {
clearTimeout(timer);//停止輪播
Left = -i * 1280;//使距離為完全顯示圖片的距離（以防在切換時放上去卡兩張圖片中間）
changeimg();//使用更改的Left去切換圖片
changeicon(i);//切換對應圖示
}
imgs[i].onmouseout = function() {
run();
}
})(i);
}

三、當前圖片的小圓點樣式需要突出

在圖片遍歷時為調整小圓點樣式的function()傳進去一個引數，通過Math.floor()函式計算出當前圖片是第幾張，從而為對應的圓點更改CSS樣式。

function run() {
//圖片切換到最後時，重新歸零。
if (Left <= -5120) {
img_list.style.marginLeft = "0px";
Left = 0;
}
//用n表示圖片切換和停留的時間，如果剛好顯示，停2000，否則以10的速度切換（Left持續-10，直到再次剛好顯示圖片）
var n = (Left % 1280 == 0 ? 2000 : 10);
changeimg();
m = Math.floor(-Left / 1280);//通過計算得出最接近的整數（1、2、3、4）
changeicon(m);//切換對應的小圓點的樣式
Left -= 10;
//重複執行run方法。實現一直輪播。
timer = setTimeout(run, n);
}
function changeicon(m) {
//切換圖示變色的方法
for (var i = 0; i < icons.length; i++) {
//先全部取消顏色
icons[i].style.backgroundColor = "";
}
//再根據m的值判斷第幾個圖示變紅。
icons[m].style.backgroundColor = "red";
}

四、在切換圖片時滑鼠放在圖片上，取消輪播效果，切換到對應圖片。

為圖片新增監聽事件，當滑鼠放在圖片上時，呼叫clearTimeout()的函式停止輪播。通過遍歷得到當前圖片的引數後，計算出合適的邊距，調整函式引數，從而切換到對應圖片。

for (var i = 0; i < imgs.length; i++) {
(function(i) {
imgs[i].onmousemove = function() {
clearTimeout(timer);//停止輪播
Left = -i * 1280;//使距離為完全顯示圖片的距離（以防在切換時放上去卡兩張圖片中間）
changeimg();//使用更改的Left去切換圖片
}
})(i);
}
function changeimg() {
//切換圖片的方法、
img_list.style.marginLeft = Left + "px";
}

以上就是成品直播原始碼，輪播圖無縫切換以及自動懸停， 更多內容歡迎關注之後的文章