溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關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,0,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",
height:HEIGHT+"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",
position:"absolute",
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,0,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,0,0)";//顏色初始化為透明
}
pre=ul.children[position];//獲取當前輪播圖對應li
pre.style.backgroundColor="rgba(255,0,0,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>關于“js如何實現無縫輪播圖效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
