使用原生JS實現輪播圖，僅需短短幾行代碼，代碼如下 當然，不可能這麼簡單，這裡我引入了自定義的 Carousel 類，是使用原生 JS 寫的，全部的代碼就不放出來了，只給出實現輪播的核心代碼 javascript // nextIndex 下一個 index change(nextIndex) { ...
使用原生JS實現輪播圖，僅需短短幾行代碼，代碼如下
let carousel = new Carousel();
carousel.render({
'elem': '#carousel',
'data': [
{
'src': 'http://dancheng.zxdyw.com/U_Image/2016/1201/e/20161201093248_7241.jpg',
'alt': '1',
'title': '1'
},
{
'src': 'http://imgsrc.baidu.com/forum/w=580/sign=585c22802df5e0feee1889096c6134e5/9726a5d6277f9e2faf4b30911f30e924b999f35e.jpg',
'alt': '2',
'title': '2'
},
{
'src': 'http://img4.imgtn.bdimg.com/it/u=1123599174,3662075684&fm=26&gp=0.jpg',
'alt': '3',
'title': '3'
},
],
});當然，不可能這麼簡單，這裡我引入了自定義的 Carousel 類，是使用原生 JS 寫的，全部的代碼就不放出來了，只給出實現輪播的核心代碼
// nextIndex 下一個 index
change(nextIndex) {
let points = this.points; // 小點點們
let content = this.content; // 主體內容
let items = this.items; // 所有的 item
let maxlen = this.data.length; // 數據個數
let thisIndex = this.getThisIndex(); // 當前顯示的 index
// 獲取真實的 nextIndex
let realNextIndex = nextIndex;
if (nextIndex > maxlen) {
realNextIndex = 1;
}
if (nextIndex < 1) {
realNextIndex = maxlen;
}
// 獲取最小 index 最大 index
let minIndex = Math.min(thisIndex, nextIndex);
let maxIndex = Math.max(thisIndex, nextIndex);
// 獲取 index 的差
let subIndex = maxIndex - minIndex;
// 獲取 transform 數據的 index
let type = thisIndex > nextIndex;
// 定義起始終止 transform
let startTransform = type ? String(subIndex * this.itemWidth) : '0';
let endTransform = type ? '0' : String(subIndex * this.itemWidth);
// 顯示兩者及兩者之間的 item
for (let i = minIndex; i <= maxIndex; i++) {
items[i].className = ITEMSHOW;
}
// 設置起始 transform
content.style.transform = `translateX(-${startTransform}%)`;
// 給 next 小點點添加 this
points[realNextIndex - 1].className = INDITEMTHIS;
// 去掉之前的小點點的 this
points[thisIndex - 1].className = INDITEM;
// 給 content 添加 transition 和 transform
setTimeout(function () {
content.style.transition = 'transform linear .5s';
content.style.transform = `translateX(-${endTransform}%)`;
}, 5);
// 工作完成後，清除
let timer = setTimeout(function () {
// 清除 content 的 transition 和 transform
content.style.transition = 'transform linear 0s';
content.style.transform = 'translateX(0)';
// 取消掉除 nextItem 之外的其它元素的顯示
for (let i = 0; i < items.length; i++) {
items[i].className = ITEM;
}
items[realNextIndex].className = ITEMSHOW;
clearTimeout(timer);
}.bind(this), 500);
}所有的代碼我已經上傳到 碼雲 了，裡面有使用方法。
也可以使用百度雲下載壓縮包（博客園好像不能上傳）。
鏈接：https://pan.baidu.com/s/1u5eNjp0iMDVHAJ3U3e5DYg
提取碼：ipvq
（註意，下載之後，文件路徑需要修改）
