<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图_滑动</title>
<script src="js/jquery-1.12.3.js"></script>
<script>
$(function(){
var key = true; //用来控制动画,在上一次动画未完成时,点击左右无效
$(".rs").on("click",function(){
//右边
$(".imgs").css({
marginLeft: function(index, value) {
var move = parseInt(value);
if(move == -1160){ //当图片移动超出界限后,使图片重新定位到第一张
return 0 + "px";
}
}
});
if(key){
key = false;
$(".imgs").animate({
marginLeft:"-=290" //移动图片,累加
},500,function(){
key = true;
});
}
});
$(".ls").on("click",function(){
//左
$(".imgs").css({
marginLeft: function(index, value) {
var move = parseInt(value);
if(move == 0){
return -1160 + "px";
}
}
});
//左边
if(key){
key = false;
$(".imgs").animate({
marginLeft:"+=290"
},500,function(){
key = true;
});
}
});
});
</script>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 290px;
margin: 200px auto;
overflow: hidden;
position: relative;
}
ul{
width: 1800px;
height: 430px;
margin-left: -290px;
}
ul>li{
list-style: none;
float: left;
}
span{
display: block;
width: 40px;
font-size: 50px;
background-color: rgba(0,0,0,0.3);
color: white;
text-align: center;
line-height: 80px;
}
div .leftArrow{
position: absolute;
top: 50%;
left: 0;
margin-top: -40px;
}
div .rightArrow{
position: absolute;
top: 50%;
right: 0;
margin-top: -40px;
}
div>a{
display: none;
}
div:hover a{
display: inline-block;
}
</style>
</head>
<body>
<div>
<ul class="imgs">
<li><img src="img/item4.jpg" /></li>
<li><img src="img/item1.jpg" /></li>
<li><img src="img/item2.jpg" /></li>
<li><img src="img/item3.jpg" /></li>
<li><img src="img/item4.jpg" /></li>
<li><img src="img/item1.jpg" /></li>
</ul>
<a href="javascript:void(0)" class="ls"><span class="leftArrow"><</span></a>
<a href="javascript:void(0)" class="rs"><span class="rightArrow">></span></a>
</div>
</body>
</html>