js轮播图
2019-03-11 本文已影响0人
Wo信你个鬼
l.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
}
.swiper {
width: 520px;
height: 280px;
overflow: hidden;
margin: 50px auto;
position: relative;
}
.swiper ul {
overflow: hidden;
width: 99999px;
}
.swiper li {
float: left;
/*width: 520px;*/
}
/*按钮*/
.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: 0.5;
cursor: pointer;
-webkit-user-select: none;
-ms-user-select: none;
}
.next {
left: 494px;
}
.transi {
transition: 500ms;
}
ul.item {
position: absolute;
width: 48px;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
overflow: hidden;
z-index: 999;
}
.item li {
float: left;
width: 10px;
height: 10px;
border: 1px solid #fff;
background: #fff;
border-radius: 50%;
margin: 0 3px;
}
li.active {
background: deepskyblue;
}
</style>
</head>
<body>
<div class="swiper">
<!--ul>li*4>img[src=$.jpg]-->
<!--图片区域 -->
<ul class="imgBox">
<li><img src="image/1.jpg" alt="" /></li>
<li><img src="image/2.jpg" alt="" /></li>
<li><img src="image/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>
<script type="text/javascript">
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 = _ul.querySelectorAll("li img"),
imgW = aImg[0].offsetWidth,
index = 1, //计算滚动到哪张图片
isTransitionend = true, //判断动画是否已完成
item = swiper.querySelector(".item");
//克隆第一张图片，添加到图片队列的最后面
let cloneLi = ali[0].cloneNode(true);
_ul.appendChild(cloneLi);
//克隆最后一张图片，添加到图片队列的最前面
let cloneLastLi = ali[ali.length - 1].cloneNode(true);
//prepend()方法，将元素添加到所有子元素的最前面
_ul.prepend(cloneLastLi);
//_ul.insertBefore(cloneLastLi,ali[0]);
//初始化图片队列
_ul.style.transform = "translateX(" + (-imgW * index) + "px)";
//点击左边按钮
pre.addEventListener("click", () => {
if(isTransitionend) {
_ul.classList.add("transi");
index++;
_ul.style.transform = "translateX(" + (-imgW * index) + "px)";
isTransitionend = false;
fenyeq(index);
}
})
//点击右边按钮
next.addEventListener("click", () => {
if(isTransitionend) {
_ul.classList.add("transi");
index--;
_ul.style.transform = "translateX(" + (-imgW * index) + "px)";
isTransitionend = false;
fenyeq(index);
}
})
//边界判断
// debugger;
_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)";
}
isTransitionend = true;
})
//分页器
//根据图片的张数生成分页器
for(let i = 0; i < aImg.length; i++) {
let 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 k = 0; k < item.children.length; k++) {
item.children[k].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 == 3 ? 0 : index; //左按钮边界
index = index < 0 ? item.children.length - 1 : index; //右按钮边界
item.children[index].classList.add("active");
}
}
var next = document.querySelector(".next")
var i = 0;
setInterval(function(){
i++;
next.click();
},1900)
</script>
</body>
</html>
