版權聲明：本文為部落客原創文章，未經部落客允許不得轉載。更多學習資料請通路我愛科技論壇:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/82623992
這個是實作的效果，基本上輪播效果和主流網站的一緻，但是我也在上面優化了一些效果，
可以線上預覽效果： https://vip.52tech.tech/
目前項目代碼已經全部開源：項目位址： https://github.com/xiugangzhang/vip.github.io
下面就來介紹一些實作思路吧：
//首頁輪播圖效果開始------------------------------------------------------------------------------------------
/**
* 使用面向對象的方式封裝這個輪播圖效果
*/
function imgShow() {
}
/**
* 首頁的電影效果輪播圖效果實作
* @type {{imgs: Array, num: number, currentNumber: number, elements: null, start: imgShow.start, init: imgShow.init, initParas: imgShow.initParas, initEvent: imgShow.initEvent, itemMove: imgShow.itemMove, mouseover: imgShow.mouseover, click: imgShow.click, autoPlay: imgShow.autoPlay}}
*/
imgShow.prototype = {
imgs : [], // 圖檔數組
num : -1, // 初始的圖檔下标
currentNumber : 0, // 目前展示的圖檔下表編号
elements : null, // 存儲擷取的DOM元素
/**
* 輸入圖檔路徑資訊之後， 開啟輪播圖效果
* @param imgs
*/
start : function (imgs) {
this.init(imgs);
},
/**
* 輸入參數初始化
* 事件處理子產品初始化
* @param imgs
*/
init : function (imgs) {
// 初始化輸入參數
this.initParas(imgs);
// 主程式入口
this.autoPlay();
// 事件初始化
this.initEvent();
},
/**
* 輸入參數初始化
* @param imgs
*/
initParas : function (imgs) {
this.imgs = imgs;
this.elements = $('.main-slider ul li');
},
/**
* 事件處理初始化
*/
initEvent : function () {
this.mouseover();
this.click();
},
/**
* 自動移動項的實作（圖檔随項一起移動）
* @param index
*/
itemMove : function (index) {
// 移動之後，找到相應的li-item，改變他的樣式
var lis = $('.main-slider ul li');
lis.each(function () {
var a = this.childNodes[0];
if (this.className === 'current') {
this.className = '';
a.childNodes[0].className = '';
a.childNodes[1].className = '';
}
});
// 把目前的設定為樣式 index = 0, 則切換為第0個li标簽
var current = lis[index+1];
current.className = 'current';
current.childNodes[0].childNodes[0].className = 'current-title';
current.childNodes[0].childNodes[1].className = 'current-content';
},
/**
* 滑鼠移動事件處理子產品
*/
mouseover : function () {
// 擷取所有的li标簽
var lis = this.elements;
var self = this;
lis.on('mouseover', function () {
if (this.className === 'first' || this.className === 'last'){
return;
}
lis.each(function () {
var a = this.childNodes[0];
if (this.className === 'current') {
this.className = '';
a.childNodes[0].className = '';
a.childNodes[1].className = '';
}
});
// 把目前的設定為樣式
var current = this.childNodes[0];
this.className = 'current';
current.childNodes[0].className = 'current-title';
current.childNodes[1].className = 'current-content';
// 原始的實作可以通過父節點的所有孩子節點變周遊的方式來判斷，srcNode.parentNode.childNodes[index] === srcNode
// console.log($(this).index())
// 設定完畢之後， 修改與之相對應的圖檔樣式資訊
$('.main-slider').css('background', 'url(' + self.imgs[$(this).index()-1] + ')').css('background-size', '100%');
});
},
/**
* 滑鼠單擊事件處理子產品
*/
click : function () {
var self = this;
$('.arrow-l').on('click', function () {
self.currentNumber--;
if (self.currentNumber<0){
self.currentNumber = self.imgs.length-1;
}
$('.main-slider').css('background', 'url(' + self.imgs[self.currentNumber] + ')').css('background-size', '100%');
// 設定為自動移動标簽項
self.itemMove(self.currentNumber);
self.num = self.currentNumber;
});
$('.arrow-r').on('click', function () {
self.currentNumber++;
if (self.currentNumber > self.imgs.length-1){
self.currentNumber = 0;
}
$('.main-slider').css('background', 'url(' + self.imgs[self.currentNumber] + ')').css('background-size', '100%');
// 設定為自動移動
self.itemMove(self.currentNumber);
self.num = self.currentNumber;
});
},
/***
* 輪播圖自動播放的實作
*/
autoPlay : function () {
var self = this;
setInterval(function () {
self.num++;
$('.main-slider').css('background', 'url(' + self.imgs[self.num % 8] + ')').css('background-size', '100%');
self.currentNumber = self.num % 8;
// 開始移動item項
self.itemMove(self.currentNumber);
}, 4000);
},
}
/**
* 輪播圖效果的啟動
* @param ev
*/
window.onload = function () {
// 圖檔數組初始化
var imgs = [
'/www/images/big0.jpg',
'/www/images/big1.jpg',
'/www/images/big2.jpg',
'/www/images/big3.jpg',
'/www/images/big4.jpg',
'/www/images/big5.jpg',
'/www/images/big6.jpg',
'/www/images/big7.jpg',
];
// 初始化參數，啟動輪播圖效果
var run = new imgShow(imgs);
run.start(imgs);
}
//首頁輪播圖效果結束------------------------------------------------------------------------------------------
js所有的實作代碼就在上面了，基本上每行代碼都做了相應的注釋，有什麼的不明白的地方也可以直接在下面提出來。如果需要完整代碼的，可以直接線上預覽或者Github上面下載下傳。
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)