JS案例：輪播圖（面向對象），最終版（註釋全面）
Html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Carousel</title>
<script src="js/Carousel.js"></script>
<style></style>
</head>
<body>
<script>
var arr = ["img/left.png", "img/right.png"]; //左右按鈕
var arr1 = [
"img/a.png",
"img/b.png",
"img/c.png",
"img/d.png",
"img/e.png"
]; //新建源
var arr2 = [
"img/1.jpg",
"img/2.jpg",
"img/3.jpg",
"img/4.jpg",
"img/5.jpg",
"img/6.jpg",
"img/7.jpg"
]; //新建源
var arr3 = ["img/aaa.jpg", "img/bbb.jpg", "img/ccc.jpg"]; //新建源
var carousel = new Carousel(document.body, arr1, arr); //實例化輪播圖
var carousel2 = new Carousel(document.body, arr2, arr); //實例化輪播圖
var carousel3 = new Carousel(document.body, arr3, arr); //實例化輪播圖
carousel.autoPlay = true; //自動播放
carousel2.autoPlay = true; //自動播放
carousel3.autoPlay = true; //自動播放
// carousel.heightValue = 600;//高寬可控
// carousel3.widthValue =1600;//高寬可控
animate();
function animate() {
//用一個動畫函數控制輪播
requestAnimationFrame(animate);
carousel.animate();
carousel2.animate();
carousel3.animate();
}
</script>
</body>
</html>
Js：
var Carousel = (function () {
var liStyle = { //初始化下面的小點樣式
width: "20px",
height: "20px",
borderRadius: "20px",
backgroundColor: "rgba(240,137,137,0.3)",
border: "1px solid #F08989",
float: "left",
lineHeight: "20px",
textAlign: "center",
marginLeft: "20px",
color: "white"
};
var ulStyle = { //小點盒子
margin: 0,
padding: 0,
listStyle: "none",
position: "absolute",
bottom: "20px"
};
var imgConStyle = { //圖片盒子
position: "absolute",
left: "0px"
};
var maskDivStyle = { //最大的盒子
overflow: "hidden",
position: "relative",
margin: "auto",
backgroundColor: "antiquewhite"
};
//功能：實現高寬可改，圖片預加載，可換圖片源
function Carousel(parent, list, btnList) {
this.init(parent, btnList); //入口函數
this.sourse = list; //引入圖片源
}
Carousel.prototype = {
loadImg: null, //正在加載的圖片
imgList: [], //加載的圖片
carouselBox: null, //裝圖片的盒子（最大的盒子）
_width: 0, //可修改的寬
_height: 0, //可修改的高
_sourse: [], //加載圖片的源（路徑）
bool: false, //是否容許輪播
index: 0, //當前加載圖片的索引
direct: "", //輪播方向
speed: 30, //輪播的速度
autoPlay: false, //是否自動輪播
dotLi: null, //小點，根據源的圖片數切換
autoTime: 200, //自動輪播時間間隔，以每幀乘以200計算
set sourse(value) { //設置切換的源時初始化其餘屬性
if (!value || !Array.isArray(value) || !value.length) return; //當源不是數組或者爲空時，截斷並跳出
this.widthValue = 0;
this.heightValue = 0; //初始化寬高
if (this.loadImg) { //初始化加載的圖片，設爲空
this.loadImg.removeEventListener("load", this.loadImgHandler);
}
this.imgList.length = 0; //清空圖片列表
this._sourse = value; //傳入源
this.reLoadImg(value); //執行加載圖片
},
get sourse() {
return this._sourse;
},
set widthValue(value) {
this._width = value; //根據傳入的寬度改變輪播圖寬度
if (this._width === 0) return;
this.carouselBox.style.width = value + "px"; //每次更新，輪播圖寬度改變
var ul = this.carouselBox.lastElementChild; //初始化，裝小點的盒子
ul.style.left = (value - ul.offsetWidth) / 2 + "px"; // 當寬度改變時，小點自適應（定位在盒子寬度中間）
},
get widthValue() {
return this._width;
},
set heightValue(value) { //根據傳入的高度改變輪播圖高度
this._height = value;
if (this._height === 0) return;
this.carouselBox.style.height = value + "px";
this.carouselBox.firstElementChild.style.height = value + "px"; //每次更新，輪播圖高度改變
this.carouselBox.children[1].style.top = this.carouselBox.children[2].style.top = (this.heightValue - this.carouselBox.children[1].offsetHeight) / 2 + "px"; // 當寬度改變時，左右按鈕自適應（定位在盒子高度中間）
},
get heightValue() {
return this._height;
},
reLoadImg: function (list) {
var img = new Image(); //生成初始圖片
img.addEventListener("load", this.loadImgHandler); //圖片加載完成後，執行下一張圖片加載
img.self = this;
img.num = 0; //當前圖片索引
img.list = list;
img.imgList = []; //圖片列表初始
img.src = list[img.num]; //經過事件傳數據
},
loadImgHandler: function (e) {
this.imgList.push(this.cloneNode(false)); //圖片列表放入被加載的圖片
this.num++; //下一張圖片索引
if (this.num > this.list.length - 1) { //當所有加載完成後，繼續執行其餘函數
this.self.imgLoadFinish(this.imgList);
return;
}
this.src = this.list[this.num]; //不然繼續加載
},
init: function (parent, btnList) { //入口函數
if (!this.carouselBox) { //保證對象單例
this.carouselBox = document.createElement("div"); //裝圖片的盒子（最大的盒子）
var imgBox = document.createElement("div"); //加載圖片的盒子，裝在最大的盒子裏，控制圖片切換和移動
this.carouselBox.appendChild(imgBox);
for (var i = 0; i < btnList.length; i++) { //加載按鈕
var btimg = new Image();
btimg.src = btnList[i];
this.carouselBox.appendChild(btimg);
if (i === 0) { //設置位置
btimg.style.left = "10px";
btimg.style.position = "absolute";
} else {
btimg.style.right = "10px";
btimg.style.position = "absolute";
}
btimg.self = this;
this.carouselBox.self = this;
this.carouselBox.addEventListener("mouseenter", this.isAuto); //控制開啓關閉自動輪播
this.carouselBox.addEventListener("mouseleave", this.isAuto);
btimg.addEventListener("click", this.changeImgHandler); //加載點擊事件
}
var ul = document.createElement("ul"); //小點盒子
Object.assign(ul.style, ulStyle); //設置樣式
Object.assign(this.carouselBox.style, maskDivStyle); //設置樣式
Object.assign(imgBox.style, imgConStyle); //設置樣式
this.carouselBox.appendChild(ul);
parent.appendChild(this.carouselBox);
}
return this.carouselBox;
},
imgLoadFinish: function (imgList) { //圖片加載完成後執行，傳入圖片列表
this.imgList = imgList;
var imgCon = this.carouselBox.firstElementChild; //初始化小點盒子和圖片盒子（不是最大的盒子）
var ul = this.carouselBox.lastElementChild;
this.clearNode(imgCon); //清除子元素方法（初始化）
this.clearNode(ul);
for (var i = 0; i < this.imgList.length; i++) { //建立小點
var li = document.createElement("li");
ul.appendChild(li);
Object.assign(li.style, liStyle); //小點樣式
}
ul.style.left = (this.widthValue - ul.offsetWidth) / 2 + "px"; //小點盒子的默認位置
imgCon.appendChild(this.imgList[0]);
ul.self = this;
ul.addEventListener("click", this.changeDot); //小點點擊事件
if (this.widthValue === 0) {
this.widthValue = this.imgList[0].width; //當傳入的寬爲0時，將寬設置爲默認寬
} else {
this.carouselBox.style.width = this.widthValue + "px"; //不然設置爲改變的寬
this.setSize(imgCon, this.widthValue, 0); //調用下面的設置寬高方法，將圖片寬高重設
}
if (this.heightValue === 0) { //同上
this.heightValue = this.imgList[0].height;
} else {
this.carouselBox.style.height = this.heightValue + "px";
imgCon.firstElementChild.style.height = this.heightValue + "px";
this.setSize(imgCon, 0, this.heightValue);
}
this.dotColor(); //執行小點樣式切換
this.carouselBox.children[1].style.top = this.carouselBox.children[2].style.top = (this.heightValue - this.carouselBox.children[1].offsetHeight) / 2 + "px"; //按鈕位置重設，自適應
},
setSize: function (con, w, h) { //設置子元素寬高函數
for (var i = 0; i < con.children.length; i++) {
if (w) {
con.children[i].style.width = w + "px";
}
if (h) {
con.children[i].style.height = h + "px";
}
}
},
clearNode: function (node) { //清除子元素函數
var len = node.children.length;
for (var i = 0; i < len; i++) {
node.firstElementChild.remove();
}
},
changeImgHandler: function (e) {
if (this.self.bool) return; //當點擊一次後，執行完一次輪播才能再次點擊
if (this.style.left === "10px") { //根據位置判斷左右按鈕
this.self.direct = "right"; //改變輪播方向
this.self.index--; //索引值減一，即加載上一張圖片
if (this.self.index < 0) { //當減到0時，加載最後一張
this.self.index = this.self.imgList.length - 1;
}
} else if (this.style.right === "10px") { //同上（相反）
this.self.direct = "left";
this.self.index++;
if (this.self.index > this.self.imgList.length - 1) {
this.self.index = 0;
}
}
this.self.creatNextPic(); //跳到加載下一張圖片函數
},
creatNextPic: function () {
if (this.direct !== "left" && this.direct !== "right") return; //當未點擊左或者右時跳出
var imgCount = this.carouselBox.firstElementChild; //獲取裝圖片的盒子（控制圖片輪播的盒子，不是最大的盒子）
if (this.direct === "left") { //當方向爲左，即單擊了左按鈕
imgCount.appendChild(this.imgList[this.index]); //裝圖片的盒子根據當前索引加入圖片（插在後面）
imgCount.style.width = this.widthValue * 2 + "px"; //裝圖片的盒子寬度設置爲圖片寬度的兩倍（放下兩張圖片）
imgCount.style.left = 0; //初始盒子位置
} else {
imgCount.insertBefore(this.imgList[this.index], imgCount.firstElementChild); //裝圖片的盒子根據當前索引加入圖片（插在前面）
imgCount.style.width = this.widthValue * 2 + "px"; //裝圖片的盒子寬度設置爲圖片寬度的兩倍（放下兩張圖片）
imgCount.style.left = -this.widthValue + "px"; //初始盒子位置
}
if (!this.widthValue) { //重設寬高
this.imgList[this.index].style.width = this.widthValue + "px";
}
if (!this.heightValue) {
this.imgList[this.index].style.height = this.heightValue + "px";
}
this.dotColor(); //切換小點顏色
this.bool = true; //容許下一次點擊
},
movePic: function () { //輪播動畫
if (!this.bool) return; //若沒加載好下一張，跳出
if (this.direct !== "left" && this.direct !== "right") {
this.bool = false;
return;
} //若沒單擊，跳出
var imgCount = this.carouselBox.firstElementChild; //初始圖片盒子
if (this.direct === "left") { //輪播方向爲左時，以設定的速度向左移動
imgCount.style.left = imgCount.offsetLeft - this.speed + "px";
if (imgCount.offsetLeft <= -this.widthValue) { //當後面的圖片移動到0時中止
imgCount.firstElementChild.remove(); //刪除左邊的圖片
imgCount.style.left = 0 + "px"; //初始化盒子的位置
this.direct = ""; //制空方向，將輪播開關關閉，須要下次點擊纔打開
this.bool = false;
}
} else { //輪播方向爲右時，以設定的速度向右移動
imgCount.style.left = imgCount.offsetLeft + this.speed + "px";
if (imgCount.offsetLeft >= 0) { //當前面的圖片移動到0時中止
imgCount.lastElementChild.remove(); //刪除右邊的圖片
imgCount.style.left = 0 + "px"; //初始化盒子的位置
this.direct = ""; //制空方向，將輪播開關關閉，須要下次點擊纔打開
this.bool = false;
}
}
},
changeDot: function (e) {
if (this.self.bool) return; //點擊按鈕或小點時，跳出
if (e.target instanceof HTMLUListElement) return; //沒有點擊小點(li）時跳出
var arr = Array.from(this.children); //小點數組化
var count = arr.indexOf(e.target); //查找小點索引
if (count === this.self.index) return; //點擊自身時跳出
if (count > this.self.index) { //當點擊的小點大於當前小點時，將方向置爲左
this.self.direct = "left";
} else if (count < this.self.index) { //反之向右
this.self.direct = "right";
}
this.self.index = count; //將圖片索引設置爲點擊小點索引
this.self.creatNextPic(); //建立下張圖片
this.self.dotColor(); //改變小點樣式
},
dotColor: function () { //前一個小點背景透明
if (this.dotLi) {
this.dotLi.style.backgroundColor = "rgba(240,137,137,0.3)";
} //將被切換的小點賦值給當前小點，使其根據計數器切換
this.dotLi = this.carouselBox.lastElementChild.children[this.index];
this.dotLi.style.backgroundColor = "rgba(240,137,137,1)";
},
isAuto: function (e) { //根據鼠標是否進入輪播圖判斷是否自動輪播
if (e.type === "mouseenter") {
this.self.autoPlay = false;
} else {
this.self.autoPlay = true;
}
},
carouselAuto: function () { //自動輪播
if (!this.autoPlay) return; //當計數器爲0時執行一次
this.autoTime--; //每幀使計時器減一
if (this.autoTime > 0) return;
this.autoTime = 200;
this.direct = "left"; //默認自動輪播方向
this.index++;
if (this.index > this.imgList.length - 1) {
this.index = 0;
}
this.creatNextPic(); //建立下一張圖
},
animate: function () { //單一動畫，每幀執行一次，將動畫放在一個函數內
this.movePic();
this.carouselAuto();
}
};
Carousel.prototype.constructor = Carousel;
return Carousel;
})();
相關文章
- 1. js面向對象輪播圖寫法
- 2. js的面向對象實例--輪播圖的實現
- 3. 面向對象封裝輪播圖
- 4. JS面向對象2-綜合案例
- 5. 基於面向對象的圖片輪播（js原生代碼）
- 6. js面向對象實現圖片輪播插件
- 7. JS原生面向對象淡入淡出輪播圖
- 8. 原生JS面向對象思想封裝輪播圖組件
- 9. jquery面向對象輪播圖：封裝版
- 10. js面向對象實例
- 更多相關文章...
- • PHP 面向對象 - PHP教程
- • Lua 面向對象 - Lua 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • PHP Ajax 跨域問題最佳解決方案
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. js面向對象輪播圖寫法
- 2. js的面向對象實例--輪播圖的實現
- 3. 面向對象封裝輪播圖
- 4. JS面向對象2-綜合案例
- 5. 基於面向對象的圖片輪播（js原生代碼）
- 6. js面向對象實現圖片輪播插件
- 7. JS原生面向對象淡入淡出輪播圖
- 8. 原生JS面向對象思想封裝輪播圖組件
- 9. jquery面向對象輪播圖：封裝版
- 10. js面向對象實例