js實現無縫輪播圖效果
阿新 • • 發佈：2020-03-10
本文例項為大家分享了js實現無縫輪播圖的具體程式碼，供大家參考，具體內容如下
//Utils.js
//封裝 預載入圖片
var Utils=(function () {
return {
//SSS
loadImg:function (srcList,callBack) {//圖片地址 回撥函式
var img=new Image();
img.num=0;//初始化num為0 圖片數
img.imgList=[];//存放圖片
img.srcList=srcList;
img.callBack=callBack;//回撥函式
img.addEventListener("load",this.loadHandler);//載入load
img.src="./img/"+srcList[img.num];//拼接圖片地址
},loadHandler:function (e) {
//this 指代img
/*cloneNode該方法將複製並返回呼叫它的節點的副本。
* 如果傳遞給它的引數是 true，它還將遞迴複製當前節點的所有子孫節點。
否則（也就是預設值，或者false），它只複製當前節點。*/
this.imgList.push(this.cloneNode(false));//將img圖片尾插入imgList陣列
this.num++;
if(this.num>=this.srcList.length){//圖片數>=srcList陣列(儲存圖片地址)的長度
this.callBack(this.imgList);//將陣列傳入回撥函式
return;
}
//事件偵聽沒有被刪除,只需更改src,監聽載入load後觸發該事件,進入該函式this.loadHandler
this.src="./img/"+this.srcList[this.num];
}
}
})();全部程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>無縫輪播圖</title>
<script src="js/Utils.js"></script>
</head>
<body>
<script>
//無縫輪播圖,全JS
/*
* 1\輪播圖大容器-->圖片容器,左右按鈕,小圓點
* 2\點選按鈕,標誌當前挪動圖片索引,移動的方向
* 3\點選小圓點,標誌當前挪動圖片的索引,移動的方向
* 4\建立目標圖片放置在當前圖片的前或後
* 5\移動圖片容器到目標圖片位置後,刪除前或後原來的圖片
* */
var bnList,imgList,imgCon,ul,pre;//儲存 左右按鈕名 圖片名 圖片容器 下方圓點標籤容器
var position=0,//圖片的序號
direction="left",//方向
speed=30,time=300,autoBoolean=false,playBoolean=false;
const WIDTH=1200,//常量定義輪播圖高寬
HEIGHT=400;
init();
function init() {
//呼叫Utils中的loadImg方法 將圖片名陣列 和回撥函式名傳入
Utils.loadImg(["left.png","right.png","a.jpeg","b.jpeg","c.jpeg","d.jpeg","e.jpeg"],createCarousel);
}
function createCarousel(list) {//建立輪播圖
bnList=list.splice(0,2);//將左右移動圖示名從list陣列中移除，添入bnList陣列
imgList=list;//將圖片名添入陣列imgList
imgList.forEach(function (t) {//遍歷陣列，給每個img元素新增寬高
t.style.width=WIDTH+"px";
t.style.height=HEIGHT+"px";
});
var carousel=ce("div",{//呼叫函式ce建立div並新增樣式
width:WIDTH+"px",height:HEIGHT+"px",position:"relative",margin:"auto",overflow:"hidden",backgroundColor:"rgba(255,0.3)"
});
console.log(carousel);//carousel為最外層div容器，包括輪播圖容器，圓點標籤， 左右按鈕
createImgCon(carousel);//呼叫函式createImgCon在 carousel中建立輪播圖圖片容器， 傳入carousel為父容器
createBn(carousel);//呼叫函式createBn中建立左右按鈕， 傳入carousel為父容器
createDot(carousel);//呼叫函式createDot中建立下方圓點標籤， 傳入carousel為父容器
document.body.appendChild(carousel);//在body中插入div carousel
carousel.addEventListener("mouseenter",mouseHandler);//給div carousel新增滑鼠進入事件
carousel.addEventListener("mouseleave",mouseHandler);//給div carousel新增滑鼠離開事件
//下方圓點標籤距左邊距
ul.style.left=(WIDTH-ul.offsetWidth)/2+"px";
changeDot();
setInterval(animation,16);//設定週期執行函式
}
function mouseHandler(e) {//滑鼠停止，開始輪播圖自動播放
if(e.type==="mouseenter"){//滑鼠進入停止自動播放，重置time計時
autoBoolean=false;
time=300;
}else if(e.type==="mouseleave"){//滑鼠離開開始自動播放
autoBoolean=true;
}
}
function createImgCon(parent) {//建立輪播圖容器div
imgCon=ce("div",{//呼叫ce建立div
width:WIDTH+"px",position:"absolute",left:"0px"
});
imgCon.appendChild(imgList[position]);//在建立的div imgCon 中新增圖片
parent.appendChild(imgCon);//在傳來的父元素div中新增新建的div imgCon
}
function createBn(parent) {//建立左右按鈕 接受傳來的父元素
bnList.forEach(function (t,index) {//遍歷陣列bnList
Object.assign(t.style,{
position:"absolute",left:index===0 ? "20px" : "none",right:index===1 ? "20px" : "none",top:(HEIGHT-t.height)/2+"px"
});
t.addEventListener("click",bnClickHandler);//按鈕新增點選監聽事件
parent.appendChild(t);//在傳來的父元素中新增左右按鈕
})
}
function createDot(parent) {//建立下方圓點標籤
ul=ce("ul",{//呼叫ce建立ul，新增樣式
listStyle:"none",bottom:"20px",margin:"0px",padding:"0px"
});
imgList.forEach(function (t,index) {//遍歷imgList，有幾張圖建立幾個li
var li=ce("li",{//新建li，新增樣式
float:"left",width:"18px",height:"18px",borderRadius:"9px",border:"1px solid rgba(255,0.8)",marginLeft: index===0 ? "0px" : "10px"
});
ul.appendChild(li);//ul中插入li
});
ul.addEventListener("click",dotClickHandler);//給ul新增監聽單擊時間 事件委託
parent.appendChild(ul);//在父元素中插入ul
}
function bnClickHandler(e) {//左右移點選移動圖片
if(playBoolean) return;
if(bnList.indexOf(this)===0){//點選左移按鈕
position--;//圖片序號--
direction="right";//圖片方向向右
if(position<0) position=imgList.length-1;//如果在第0張點左移，position為最後一張圖的序號
}else{//點選右移按鈕
position++;//圖片序號++
direction="left";//圖片方向向左
if(position>imgList.length-1) position=0;//如果在最後1張點右移，position為第一張圖的序號
}
createNextImg();//建立下一張圖片
}
function dotClickHandler(e) {//圓點標籤點選移動圖片
if(playBoolean) return;
if(e.target.nodeName!=="LI") return;//點選的不是li return
var arr=Array.from(this.children);//this=ul
var index=arr.indexOf(e.target);//index存點選的li在arr中的下標
if(index===position) return;//如果是當前這個位置點,不操作
if(index>position){//如果點選的大於當前
direction="left";//圖片方向向左
}else{//如果點選的小於當前
direction="right";//圖片方向向右
}
position=index;//position賦值為點選的li序號
createNextImg();//建立下一張圖片
}
function createNextImg() {//建立下一張圖片
imgCon.style.width=WIDTH*2+"px";//將輪播圖容器寬度*2
if(direction==="left"){//如果圖片向左運動
imgCon.appendChild(imgList[position]);//在當前圖片後面新增子元素
}else if(direction==="right"){//如果圖片向右運動
imgCon.insertBefore(imgList[position],imgCon.firstElementChild);//在第一張圖片前面新增子元素
imgCon.style.left=-WIDTH+"px";//移動原有圖片容器的位置左右一張圖片寬度
}
playBoolean=true;//圖片載入完設定為true
changeDot();//改變下方圓形標籤的顏色
}
function changeDot() {//改變下方圓形標籤的顏色
if(pre){
pre.style.backgroundColor="rgba(255,0)";//顏色初始化為透明
}
pre=ul.children[position];//獲取當前輪播圖對應li
pre.style.backgroundColor="rgba(255,0.5)";//顯示該li的顏色
}
function animation() {
imgPlay();//圖片移動
autoPlay();//自動移動
}
function imgPlay() {
if(!playBoolean) return; //為false return
if(direction==="right"){//圖片右移
imgCon.style.left=imgCon.offsetLeft+speed+"px";//圖片以speed的速度向右劃過
if(imgCon.offsetLeft>=0){//運動到輪播圖框停止移動
imgCon.style.left="0px";
playBoolean=false;
imgCon.lastElementChild.remove();//移走上一張圖片
imgCon.style.width=WIDTH+"px";//重置輪播圖容器寬度
}
}else if(direction==="left"){//圖片左移
imgCon.style.left=imgCon.offsetLeft-speed+"px";//圖片以speed的速度向左劃過
if(imgCon.offsetLeft<=-WIDTH){//運動到輪播圖框左一張圖片的寬度處停止移動
playBoolean=false;
imgCon.firstElementChild.remove();//移走上一張圖片
imgCon.style.left="0px";//重置輪播圖容器位置
imgCon.style.width=WIDTH+"px";//重置輪播圖容器寬度
}
}
}
function autoPlay() {//自動輪播
if(!autoBoolean) return;
time--;
if(time>0) return;
time=200;
var evt=new MouseEvent("click");
bnList[1].dispatchEvent(evt);//dispatchEvent事件觸發器，觸發bnList[1]的click事件
}
function ce(type,style) { //建立標籤元素並新增樣式 (建立元素型別,新增的css樣式)
var elem=document.createElement(type);
/*Object.assign方法用來將源物件（source）的所有可列舉屬性，
複製到目標物件（target）。它至少需要兩個物件作為引數，
第一個引數是目標物件，後面的引數都是源物件。*/
Object.assign(elem.style,style);
return elem;
}
</script>
</body>
</html>精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。