一.js实现
<!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>
*{
padding:0;
margin:0;
box-sizing: border-box;
}
ul{
list-style: none;
}
.swiper-wrap{
position:relative;
width:500px;
margin: 30px auto;
}
#swiper-ul{
position:relative;
width:100%;
height:186px;
}
li{
position: absolute;
top:0;
width: 100%;
opacity: 0;
transition: all .5s;
}
li img{
display: block;
width:100%;
}
li.active{
z-index:100;
opacity: 1;
transition: all .5s;
}
#swiper-right,#swiper-left{
position: absolute;
top:50%;
transform: translateY(-50%);
z-index: 101;
width:60px;
height:50px;
background: pink;
cursor: pointer;
}
#swiper-right{
right:0;
}
#swiper-left{
left:0;
}
</style>
</head>
<body>
<div class="swiper-wrap">
<ul id="swiper-ul" data-index=1>
<li>
<img src="" alt="">
</li>
<li class="active">
<img src="" alt="">
</li>
<li>
<img src="" alt="">
</li>
<li>
<img src="" alt="">
</li>
<li>
<img src="" alt="">
</li>
</ul>
<div id="swiper-left">左</div>
<div id="swiper-right">右</div>
</div>
</body>
</html>
<script>
var swiperRight = document.getElementById("swiper-right");
var swiperLeft = document.getElementById("swiper-left");
var swiperUl = document.getElementById("swiper-ul");
var swiperli = swiperUl.getElementsByTagName("li");
var swiperbox = document.getElementsByClassName("swiper-wrap")[0];
//右边按钮点击事件
swiperRight.onclick = function(){
switchSwiper("right")
}
//左边按钮点击事件
swiperLeft.onclick = function(){
switchSwiper("left")
}
//一个参数 来判断左右 type "left" "right"
function switchSwiper(type){
var activeIndex = Number(swiperUl.getAttribute("data-index"));
// nextIndex 是下一个，有个判断条件是 如果当前是最后一个 那么重置为0.
if(type==="left"){
if(activeIndex === 0){
var nextIndex = swiperli.length-1;
}else{
var nextIndex = activeIndex-1;
}
}else{
if(activeIndex >= swiperli.length-1){
var nextIndex = 0
}else{
var nextIndex = activeIndex+1;
}
}
//先删除类名active
var activeDom = swiperUl.getElementsByClassName("active")[0];
activeDom.classList.remove("active");
//添加active类名
swiperli[nextIndex].classList.add("active");
//忘记更改状态
swiperUl.setAttribute("data-index",nextIndex);
}
//自动轮播
var times = setInterval(function(){
switchSwiper("right");
},1000)
// 划入停止定时器
swiperbox.onmouseenter = function(){
clearInterval(times);
}
// 划出开始定时器
swiperbox.onmouseleave = function(){
times = setInterval(function(){
switchSwiper("right");
},1000)
}
</script>
二.jq实现
1.html
<div class="swiper-wrap" >
<ul class="clearfix" id="swiperBox" >
<li><img src="" alt=""></li>
<li>
<img src="" alt="">
</li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<li>
<img src="" alt="">
</li>
</ul>
<p id="prev">左</p>
<p id="next">右</p>
<div class="btm">
<i class="actives">1</i>
<i>2</i>
<i>3</i>
<i>4</i>
</div>
</div>
2.css
.swiper-wrap{
width: 500px;
margin: 50px auto;
overflow: hidden;
border:2px solid #f00;
position: relative;
}
p{
position: absolute;
z-index: 100;
top:0;
left:0;
background: #f00;
padding:20px;
cursor: pointer;
}
#next{
left: auto;
right:0;
}
#swiperBox{
white-space: nowrap;
font-size: 0px;
position: relative;
width: 100%;
left: -500px;
}
#swiperBox li {
display: inline-block;
width: 100%;
}
#swiperBox li img{
width: 100%;
}
.btm{
position: absolute;
z-index: 102;
top: 30px;
left: 50%;
transform: translateX(-50%);
}
.btm i{
display: inline-block;
left: 50%;
width: 50px;
height: 30px;
background-color: white;
color: black;
border-radius: 50%;
line-height: 30px;
text-align: center;
}
3.jq代码
<script>
var index = 1;
var leftheight = $("#swiperBox").width();
$("#swiperBox").css("left",-leftheight+"px")
$("#next").click(function(){
index++;
$("#swiperBox").animate({
left:-index*leftheight+"px"
})
if(index===$("#swiperBox li").length-1){
$("#swiperBox").animate({
left:-leftheight+"px"
},0)
index =1;
}
})
$("#prev").click(function(){
index--;
$("#swiperBox").animate({
left:-index*leftheight+"px"
})
if(index===0){
$("#swiperBox").animate({
left:-($("#swiperBox li").length-2)*leftheight+"px"
},0)
index =$("#swiperBox li").length -2
}
})
var times = setInterval(function(){
index++;
$("#swiperBox").animate({
left:-index*leftheight+"px"
})
if(index===$("#swiperBox li").length-1){
$("#swiperBox").animate({
left:-leftheight+"px"
},0)
index =1;
}
},1000)
$(".btm i").click(function(){
var index = $(this).index()
$(this).addClass("actives").siblings().removeClass("actives")
$("#swiperBox").animate({
left:-index*leftheight+"px"
},)
})
