用jq实现简单轮播

Posted 2020-09-26 秋水涴晴汐

 

 

 

一个简单的实例：

css代码：

<style type="text/css">
@charset "utf-8";
*{
padding:0px;
border:0px;
margin:0px;
}
ul {
list-style:none;
}
.slideBox {
margin:50px auto;
width:300px;
height:480px;
box-shadow:2px 2px 10px #C38DD4;
border-radius:20px;
position:relative;
overflow:hidden;
}
.slideBox ul {
position:relative;
width:2000px;}
.slideBox ul li {
float:left;
width:300px;
height:480px;
position:relative;

}
.spanBox {
position:absolute;
width:300px;
height:20px;
bottom:10px;
left:80px;
}
.spanBox span {
width:18px;
height:18px;
margin-left:5px;
background-color:rgba(201,178,207,1.00);
float:left;
line-height:16px;
text-align:center;
text-shadow:2px 2px 2px #C5EBF0;
font-family:cabin-sketch;
font-size:15px;
}
.slideBox .spanBox .active {
background-color:rgba(155,83,244,0.79);
border:solid 1px #BEEBEC;
border-radius:4px;
}
.prev {
position:absolute;
left:0px;
top:320px;
float:left;
border-left:solid 1px rgba(251,245,246,1.00);
opacity:0.5;
}
.next {
width:15px;
height:50px;
position:absolute;
right:0px;
top:320px;
float:right;
border-right:solid 1px rgba(245,237,237,1.00);
opacity:0.5
}
</style>

html代码：

<div class="slideBox">
<ul>
<li><img src="image/Lslide3.jpg" width="300" height="480"/></li>
<li><img src="image/Lslide4.jpg" width="300" height="480"/></li>
<li><img src="image/Lslide5.jpg" width="300" height="480"/></li>
<li><img src="image/Lslide6.jpg" width="300" height="480"/></li>
<li><img src="image/Lslide2.jpg" width="300" height="480"/></li>
<li><img src="image/Lslide1.jpg" width="300" height="480"/></li>
</ul>
<div class="spanBox">
<span class="active">q</span>
<span>a</span>
<span>z</span>
<span>w</span>
<span>s</span>
<span>x</span>
</div>
<div class="prev"><img src="image/left_arrow.jpg" width="15" height="50" /></div>
<div class="next"><img src="image/right_arrow.jpg" width="15" height="50" /></div>
</div>

js代码：

<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var slideBox = $(".slideBox");
var ul = slideBox.find("ul");
var oneWidth = slideBox.find("ul li").eq(0).width();
var number = slideBox.find(".spanBox span"); //注意分号 和逗号的用法
var timer = null;
var sw = 0;
//每个span绑定click事件，完成切换颜色和动画，以及读取参数值
number.on("click",function (){
$(this).addClass("active").siblings("span").removeClass("active");
sw=$(this).index();
ul.animate({
"right":oneWidth*sw, //ul标签的动画为向左移动；
});
});
//左右按钮的控制效果
$(".next").stop(true,true).click(function (){
sw++;
if(sw==number.length){sw=0};
number.eq(sw).trigger("click");
});
$(".prev").stop(true,true).click(function (){
sw--;
if(sw==number.length){sw=0};
number.eq(sw).trigger("click");
});
//定时器的使用，自动开始
timer = setInterval(function (){
sw++;
if(sw==number.length){sw=0};
number.eq(sw).trigger("click");
},2000);
//hover事件完成悬停和，左右图标的动画效果
slideBox.hover(function(){
$(".next,.prev").animate({
"opacity":1,
},200);
clearInterval(timer);
},function(){
$(".next,.prev").animate({
"opacity":0.5,
},500);
timer = setInterval(function (){
sw++;
if(sw==number.length){sw=0};
number.eq(sw).trigger("click");
},2000);
})

})
</script>