<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
*{margin: 0;
padding: 0;}
.swiper{
width: 100%;
height: 400px;
position: relative;
overflow: hidden;}
.swiper-slide{
position: absolute;
left:0;
top:0;
background-color: #f0f0f0;
width: 100%;
height: 100%;
display: none;
text-align: center;
}
@keyframes slideIn {
from{transform: translate(100%,0);}
to{transform: translate(0,0);}
}
@keyframes slideOut {
from{transform: translate(0,0);}
to{transform: translate(-100%,0);}
}
@keyframes slideIn2 {
from{transform: translate(-100%,0);}
to{transform: translate(0,0);}
}
@keyframes slideOut2 {
from{transform: translate(0,0);}
to{transform: translate(100%,0);}
}
@keyframes fadeIn {
from {opacity: 0;}
to{opacity: 1;}
}
@keyframes fadeOut {
from {opacity: 1;}
to{opacity: 0;}
}
.swiper .out{
animation: slideOut .6s linear;
/* animation: fadeOut .6s linear; */
}
.swiper .on{
animation: slideIn .6s linear;
/* animation: fadeIn .6s ease; */
}
.swiper.leftC .on{
animation: slideIn2 .6s linear;
}
.swiper.leftC .out{
animation: slideOut2 .6s linear;
}
.swiper .active{color:red;}
.swiper .swiper-slide:nth-of-type(2n){background-color: yellow;}
.swiper .pagination{position: absolute; left:0;width: 100%; text-align: center; bottom:10px}
.swiper .pagination .thumb{margin: 0 5px; font-size: 10px;}
.swiper .pre{position: absolute; left:5px; top:50%;}
.swiper .next{position: absolute; right:5px; top:50%;}
</style>
</head>
<body>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">1</div>
<div class="swiper-slide">2</div>
<div class="swiper-slide">3</div>
</div>
<span class="pre"><</span>
<span class="next">></span>
<span class="pagination">
</span>
</div>
<script>
function Swiper(selector){
this.current=0;
this.preIndex = 0;
this.stopId=null;
this.dom = document.querySelector(selector);
this.slides = this.dom.querySelectorAll(".swiper-slide");
this.len = this.slides.length;
this.play();
var that = this;
this.dom.onmouseover=function(){that.stop()}
this.dom.onmouseout=function(){that.play()}
this.slides[0].style.display="block";
this.next = this.dom.querySelector(".next");
this.pre = this.dom.querySelector(".pre");
this.dom.classList.add("rightC");
this.next.onclick=function(){
that.dom.classList.add("rightC")
that.preIndex=that.current;
that.current++;
that.current>=that.len?that.current=0:"";
that.goSlide(that.current);
}
this.pre.onclick=function(){
that.dom.classList.add("leftC")
that.preIndex=that.current;
that.current--;
that.current<0?that.current=that.len-1:"";
that.goSlide(that.current);
}
this.pagination = this.dom.querySelector(".pagination");
var s = "";
for(var i=0;i<this.len;i++){
s+=`<span class="thumb ${i==0?'active':''} thumb-${i}">${i+1}</span>`;
}
this.pagination.innerHTML = s;
this.thumbs = this.pagination.querySelectorAll(".thumb");
for(let i=0;i<this.len;i++){
this.thumbs[i].onclick=function(){
that.pagination.querySelector(".active").classList.remove("active");
this.classList.add("active");
that.preIndex=that.current;
that.current = i;
if(that.preIndex<that.current){
that.dom.classList.remove("leftC");
that.dom.classList.add("rightC");
}else{
that.dom.classList.remove("rightC");
that.dom.classList.add("leftC");
}
that.goSlide(that.current);
}
}
}
Swiper.prototype.play=function(){
var that = this;
this.stopId = setInterval(function(){
that.dom.classList.remove("leftC");
that.preIndex = that.current;
that.current++;
if(that.current>=that.len){
that.current=0;
}
that.goSlide(that.current);
},2000)
}
Swiper.prototype.stop=function(){
clearInterval(this.stopId);
}
Swiper.prototype.goSlide=function(n){
this.pagination.querySelector(".active").classList.remove("active");
this.thumbs[n].classList.add("active");
this.slides[this.preIndex].onanimationend=undefined;
this.slides[n].onanimationend=undefined;
this.slides[this.preIndex].classList.remove("on");
this.slides[this.preIndex].classList.add("out");
var that = this;
this.slides[this.preIndex].onanimationend=function(){
this.classList.remove("out");
// that.dom.classList.remove("leftC");
this.style.display="none";
this.onanimationend=undefined;
}
console.log("正在顯示第"+(n+1)+"張");
this.slides[n].classList.add("on");
this.slides[n].style.display="block";
this.slides[this.preIndex]=n;
}
var swiper = new Swiper(".swiper");
</script>
</body>
</html>
閉包簡單輪播圖
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章