JS實現橫向輪播圖（中級版）
阿新 • • 發佈：2020-01-20
本文例項為大家分享了JS實現橫向輪播圖的具體程式碼，供大家參考，具體內容如下
描述：
輪播圖，中級，橫向buton或者底部數字控制輪播，可以實現自動輪播（註釋了，使用的話將其註釋消掉），解決了初級版本的點1再點5時多張圖片滑動的問題，核心只有兩張圖在切換，加入了圖片載入。
效果：
程式碼：
js檔案：
/*
* 工廠模式
* */
var Method=(function () {
return {
loadImage:function (arr,callback) {
var img=new Image();
img.arr=arr;
img.list=[];
img.num=0;
img.callback=callback;
// 如果DOM物件下的事件偵聽沒有被刪除掉，將會常駐堆中
// 一旦觸發了這個事件需要的條件，就會繼續執行事件函式
img.addEventListener("load",this.loadHandler);
img.self=this;
img.src=arr[img.num];
},loadHandler:function (e) {
this.list.push(this.cloneNode(false));
this.num++;
if(this.num>this.arr.length-1){
this.removeEventListener("load",this.self.loadHandler);
this.callback(this.list);
return;
}
this.src=this.arr[this.num];
},$c:function (type,parent,style) {
var elem=document.createElement(type);
if(parent) parent.appendChild(elem);
for(var key in style){
elem.style[key]=style[key];
}
return elem;
}
}
})();html檔案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/Method.js"></script>
</head>
<body>
<script>
var imgCon,ul,prevLi;
var arr=["img/a.jpeg","img/b.jpeg","img/c.jpeg","img/d.jpeg","img/e.jpeg"];
var position=0;
var direction="";
var carouselBool=false;
var autoBool=false;
var time=240;
const WIDTH=1200;
const HEIGHT=400;
init();
function init() {
createCarousel();
createLiAndImg();
changeLi();
setInterval(animation,16)
}
function createCarousel() {//建立預設的div模板 用於裝圖片
var carousel=Method.$c("div",document.body,{
width: WIDTH+"px",height: HEIGHT+"px",position: "relative",margin: "auto",overflow:"hidden"
});
carousel.addEventListener("mouseenter",mouseHandler);
carousel.addEventListener("mouseleave",mouseHandler);
imgCon=Method.$c("div",carousel,{//圖片輪播 div
width: WIDTH+"px",position:"absolute",left: 0,fontSize: 0
});
ul=Method.$c("ul",{//裝5個按鈕的ul
position: "absolute",bottom: "20px",listStyle: "none",margin: "auto"
});
var leftBn=Method.$c("img",{//左 按鈕
position: "absolute",left: "20px",top:"170px"
});
leftBn.src="img/left.png";
var rightBn=Method.$c("img",{//右 按鈕
position: "absolute",right: "20px",top:"170px"
});
rightBn.src="img/right.png";
leftBn.addEventListener("click",clickHandler);
rightBn.addEventListener("click",clickHandler)
}
function createLiAndImg() {
for(var i=0;i<arr.length;i++){//arr 事先裝好了 5個圖片
var li=Method.$c("li",{//每個li的資料
width: "20px",height: "20px",border:"1px solid red",borderRadius:"10px",float:"left",marginLeft:"8px"
});
li.num=i;
li.addEventListener("click",liClickHandler);
}
ul.style.left=(WIDTH-ul.offsetWidth)/2+"px";
var img=Method.$c("img",imgCon,height: HEIGHT+"px"
});
img.src=arr[position];
}
function mouseHandler(e) {
e = e || window.event;
if(e.type==="mouseenter"){//滑鼠劃上 自動暫停
autoBool=false;
}else if(e.type==="mouseleave"){//滑鼠離開 自動開始
autoBool=true;
}
}
function clickHandler(e) {//左右button的鍵位判斷 點選事件
e = e || window.event;
if(carouselBool) return;
if(~this.src.indexOf("left")){
position--;
if(position<0) position=arr.length-1;
direction="right";
}else{
position++;
if(position>arr.length-1) position=0;
direction="left";
}
createCarouselImg();
}
function liClickHandler(e) {
e = e || window.event;
if(carouselBool) return;
if(this.num===position) return;
if(this.num>position){
direction="left";
}else{
direction="right";
}
position=this.num;
createCarouselImg();
}
function createCarouselImg() {
if(direction!=="left" && direction!=="right")return;
var img=Method.$c("img",null,height: HEIGHT+"px"
});
img.src=arr[position];
imgCon.style.width=WIDTH*2+"px";
if(direction==="left"){
imgCon.appendChild(img);
}else if(direction==="right"){
imgCon.insertBefore(img,imgCon.firstElementChild);
imgCon.style.left=-WIDTH+"px";
}
changeLi();
carouselBool=true;
}
function changeLi() {
if(prevLi){
prevLi.style.backgroundColor="rgba(255,0)";
}
prevLi=ul.children[position];
prevLi.style.backgroundColor="rgba(255,0.5)";
}
function animation() {
carouselMovie();
carouselAuto();
}
function carouselMovie() {
if(!carouselBool) return;
if(direction==="left"){
if(imgCon.offsetLeft<=-WIDTH){
carouselBool=false;
imgCon.firstElementChild.remove();
imgCon.style.left="0px";
return;
}
imgCon.style.left=imgCon.offsetLeft-40+"px";
return;
}
if(imgCon.offsetLeft>=0){
carouselBool=false;
imgCon.lastElementChild.remove();
return;
}
imgCon.style.left=imgCon.offsetLeft+30+"px";
}
/*
* 自動輪播函式
* 1、如果當前autoBool是false，就不進行自動輪播
* 這個變數是滑鼠進入輪播圖時是false，離開時
* 才會變化為false
* 2、讓time--，因為這個函式沒16毫秒執行一次，如果
* 每次進來就讓time-1，然後判斷time是否小於等於0，如果
* 小於等於0，說明這個函式已經進入了240次，每次16毫米，
* 合計就是4秒鐘。這樣可以控制讓輪播圖每4秒自動播放下張
* 圖片
* 3、如果time小於等於0，就重新讓time等於240，等待下次進入
* 4、設定圖片播放定位+1，如果大於了圖片的數量，就讓它為0
* 5、設定輪播圖方向是向左運動
* 6、執行建立輪播圖片，並且繼續後面的任務
*
*
*
* */
function carouselAuto() {
if(!autoBool)return;
time--;
if(time>0)return;
//當time減到0時，就不繼續減了，進入下面
time=240;
position++;
if(position>arr.length-1) position=0;
direction="left";
createCarouselImg();
}
</script>
</body>
</html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。