在上一篇文章基礎(chǔ)上優(yōu)化后的代碼，主要是刪掉了不必要的第一張前面的那張圖片
<!DOCTYPE html>
<html lang="zh">
<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>首尾無縫銜接輪播圖</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
.wrapall{
overflow: hidden; /* 一定要設(shè)置８橥埂Ｃ闹怠！ */
margin: auto;
}
</style>
</head>
<body>
<div id="lll_slide" class="wrapall">
</div>
<script type="text/javascript">
let imgarr = [ // 請確保每一張圖片的寬高比都一樣护糖。
'./imgs/1.jpg',
'./imgs/2.jpg',
'./imgs/3.jpg'
];
function Slideshow(obj){
this.id = obj.id; // 容器id
this.container = document.getElementById(this.id); // 獲取容器
this.resetimgarr = obj.imgarr; // 圖片數(shù)組
this.curIndex = 0; //當(dāng)前的圖片索引
this.wdwidth = obj.wdwidth // 獲取當(dāng)前body的寬度褥芒，注意，這里不能用 window.innerWidth;
}
Slideshow.prototype = {
resetImgarr(){
let firstone = this.resetimgarr[0];
this.resetimgarr.push(firstone); // 尾部加入第一張照片
},
setPosition: function(){
this.setImgList();
this.setBtns();
},
setImgList(){
this.listbox = document.createElement('ul'); // 創(chuàng)建圖片列表
this.resetimgarr.map((item,i)=>{
let li = document.createElement('li');
let img = document.createElement('img');
img.src = item;
li.appendChild(img);
this.listbox.appendChild(li);
});
this.container.appendChild(this.listbox); // 將圖片列表添加進 對應(yīng) id 的容器里嫡良。
let styleE = document.createElement('style'); // 動態(tài)添加css樣式
styleE.innerHTML = `
#`+this.id+`{
width: `+ this.wdwidth +`px;
}
#`+this.id+` ul{
width: `+ this.resetimgarr.length * this.wdwidth +`px;
display: flex;
position: relative; /* 相對定位锰扶，用于移動 */
left: 0; /* 設(shè)置初始移動位置 */
}
#`+this.id+` ul li{
width: `+this.wdwidth+`px;
}
#`+this.id+` ul li img{
width: 100%;
height: auto;
display: block;
}`;
this.container.appendChild(styleE); // 將style標(biāo)簽放進文檔里
},
setBtns(){
let btnBox = document.createElement('div');
let prevBtn = document.createElement('button');
let nextBtn = document.createElement('button');
prevBtn.innerHTML = '上一張';
nextBtn.innerHTML = '下一張';
prevBtn.className = 'prevBtn';
nextBtn.className = 'nextBtn';
btnBox.appendChild(prevBtn);
btnBox.appendChild(nextBtn);
this.container.appendChild(btnBox);
},
scrollE(direction){ // 一張圖移動完成
let eachMove = direction * 10; // 每一步移動的距離,并且控制方向
let tmpMoveAll = 0
if(direction === 1){
if(this.curIndex >= 3){ //到尾部最后一張后，重置到第一張
this.curIndex = 0;
}
}else if(direction === -1){
if(this.curIndex <= 0){ //到尾部最后一張后寝受，重置到第一張
this.curIndex = 3;
}
}
let beginE = setInterval(()=>{
if(Math.abs(tmpMoveAll)>=this.wdwidth){
clearInterval(beginE);
this.curIndex += direction;
}else{
tmpMoveAll += eachMove;
this.listbox.style.left = -tmpMoveAll - this.curIndex*this.wdwidth +"px";
}
},1);
},
scrollAll(){ // 多張圖輪播
let beginAll = setInterval(()=>{
this.scrollE(1);
},4000);
},
Init(){
this.resetImgarr();
this.setPosition();
this.scrollAll();
this.container.querySelector('.prevBtn').addEventListener('click',()=>{ // 使用箭頭函數(shù)少辣，防止this指向改變
this.scrollE(-1);
});
this.container.querySelector('.nextBtn').addEventListener('click',()=>{ // 使用箭頭函數(shù)，防止this指向改變
this.scrollE(1);
});
}
}
let myslide = new Slideshow({id:"lll_slide",imgarr:imgarr,wdwidth:600});
myslide.Init();
</script>
</body>
</html>
