1.HTML代码
<div class="swiper">
<ul class="imgBox">
<li><img src="./Images/dunkin-master-mens-basketball-t-shirt-LF0LKc.jpg" alt="" /></li>
<li><img src="./Images/dunkin-master-mens-basketball-t-shirt-LF0LKc (1).jpg" alt="" /></li>
<li><img src="./Images/dunkin-master-mens-basketball-t-shirt-LF0LKc (2).jpg" alt="" /></li>
<li><img src="./Images/dunkin-master-mens-basketball-t-shirt-LF0LKc (3).jpg" alt="" /></li>
<li><img src="./Images/dunkin-master-mens-basketball-t-shirt-LF0LKc (4).jpg" alt="" /></li>
</ul>
<div class="btn pre"><</div>
<div class="btn next">></div>
<ul class="item">
<!--<li class="active"></li>
<li></li>
<li></li>-->
</ul>
</div>
2.css代码
.swiper{
border: 1px solid black;
margin: 50px auto;
position: relative;
overflow: hidden;
}
.swiper ul{
width: 9999px; //更改
overflow: hidden;
}
.swiper li{
float: left;
}
.btn{
position: absolute;
top: 50%;
left: -4px;
width: 30px;
height: 30px;
margin-top: -15px;
text-align: center;
line-height: 27px;
border-radius: 50%;
font-size: 26px;
color: #fff;
background: #666;
opacity: .5;
cursor: pointer;
-webkit-user-select: none;
-ms-user-select: none;
}
.next{
left: 830px;//更改
}
.transi{
transition: 500ms;
}
ul.item{
width: 80px;
position: absolute;
bottom: 20px;
left: 50%;//更改
transform: translateX(-50%);
overflow: hidden;
z-index: 1000;
}
.item li{
float: left;
width: 10px;
height: 10px;
border: 1px solid #fff;
background: #fff;
border-radius: 50%;
margin: 0 3px;
}
li.active{
background: gray;
}
3.js代码
window.onload=function(){
let swiper = document.querySelector(".swiper"),
pre = swiper.querySelector(".pre"),
next = swiper.querySelector(".next"),
_ul = swiper.querySelector(".imgBox"),
ali = _ul.querySelectorAll('li'),
aImg = swiper.querySelectorAll("li img"),
imgW = aImg[0].offsetWidth,
index = 1,
isTransitioned = true,
item = swiper.querySelector('.item');
let cloneLi = ali[0].cloneNode(true);
_ul.appendChild(cloneLi);
let cloneLastLi = ali[ali.length-1].cloneNode(true);
// _ul.insertBefore(cloneLastLi,ali[0]);
_ul.prepend(cloneLastLi);
next.addEventListener("click",()=>{
if(isTransitioned){
index++;
move();
fenyeq(index);
}
})
_ul.style.transform="translateX("+(-imgW*index)+"px)";
pre.addEventListener("click",()=>{
if(isTransitioned){
index--;
move();
fenyeq(index);
}
})
setInterval(function(){
if(isTransitioned){
index++;
move();
fenyeq(index);
}
},4000)
_ul.addEventListener("transitionend",()=>{
if(index == aImg.length+1){
index = 1;
_ul.classList.toggle("transi");
_ul.style.transform="translateX("+(-imgW*index)+"px)";
}
if(index==0){
index=aImg.length;
_ul.classList.toggle("transi");
_ul.style.transform="translateX("+(-imgW*index)+"px)";
}
isTransitioned = true;
})
for(let i=0;i<aImg.length;i++){
var newLi = document.createElement('li');
item.appendChild(newLi);
}
item.children[0].classList.add('active');
for(let j=0;j<item.children.length;j++){
item.children[j].addEventListener('click',()=>{
for(let q=0;q<item.children.length;q++){
item.children[q].classList.remove('active');
}
item.children[j].classList.add('active');
index = j+1;
_ul.classList.add('transi');
_ul.style.transform="translateX("+(-imgW*index)+"px)";
})
}
function fenyeq(index){
for(let k=0;k<item.children.length;k++){
item.children[k].classList.remove('active');
}
index = index -1;
index = index==item.children.length?0:index;
index = index<0?item.children.length-1:index;
item.children[index].classList.add('active');
}
function move(){
_ul.classList.add("transi");
_ul.style.transform="translateX("+(-imgW*index)+"px)";
isTransitioned = false;
}
}
以上代码已经亲测，甚至部署过项目里面，需要解读css
文章评论