在上一篇文章基础上优化后的代码，主要是删掉了不必要的第一张前面的那张图片
<!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; /* 一定要设置！！！ */
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; // 图片数组
this.curIndex = 0; //当前的图片索引
this.wdwidth = obj.wdwidth // 获取当前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'); // 创建图片列表
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); // 将图片列表添加进 对应 id 的容器里。
let styleE = document.createElement('style'); // 动态添加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; /* 设置初始移动位置 */
}
#`+this.id+` ul li{
width: `+this.wdwidth+`px;
}
#`+this.id+` ul li img{
width: 100%;
height: auto;
display: block;
}`;
this.container.appendChild(styleE); // 将style标签放进文档里
},
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',()=>{ // 使用箭头函数，防止this指向改变
this.scrollE(-1);
});
this.container.querySelector('.nextBtn').addEventListener('click',()=>{ // 使用箭头函数，防止this指向改变
this.scrollE(1);
});
}
}
let myslide = new Slideshow({id:"lll_slide",imgarr:imgarr,wdwidth:600});
myslide.Init();
</script>
</body>
</html>
网友评论