<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
*{margin: 0; padding: 0;}
ul,ol{list-style: none;}
#box{
width: 500px;
height: 300px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
.pictures{
float: left;
z-index: 1000;
width: 5000px;
height: 300px;
}
.pictures li{float: left;}
.left,.right{
width: 18px;
height: 40px;
background: #ccc;
opacity: 0.6;
font-size: 30px;
font-weight: bold;
cursor: pointer;
}
.left{
position: absolute;
top: 45%;
}
.right{
position: absolute;
top: 45%;
right: 0;
}
</style>
<body>
<div id="box">
<ul class="pictures">
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
<li><img src="images/5.jpg"></li>
</ul>
<div class="left"><</div>
<div class="right">></div>
</div>
<script type="text/javascript">
var rightRunning = false;
//轮播图左切换
$(".right").click(function(){
if(rightRunning)
return;
rightRunning = true;
$(".pictures").stop(true).animate({
"margin-left":-500
},500,function(){
$(".pictures li:first").appendTo($(".pictures"));
$(".pictures").css('margin-left', '0px');
rightRunning = false;
})
})
//轮播图右切换
var leftRunning = false;
$(".left").click(function(){
if(leftRunning)
return; //阻止连续点击左切换
leftRunning = true;
$(".pictures").stop(true);
$(".pictures li:last").prependTo($(".pictures"));
$(".pictures").css('margin-left', '-500px');
$(".pictures").animate({
"margin-left":0
},500,function(){leftRunning = false;})
})
</script>
</body>
</html>
演示效果：
