<!DOCTYPE html>
<html>
<head>
<title>jquery动画滑动</title>
<style type="text/css">
.list{
border: 1px solid #b4b4b4;
width: 450px;
position: relative;
height: 150px;
overflow: hidden;
}
.box{
position: absolute;
width: 100%;
font-size: 0;
white-space:nowrap;
}
.div{
padding: 10px;
width: 130px;
height: 130px;
display: inline-block;
}
.div img{
width: 100%;
height: 100%;
object-fit: cover;
}
.next,.pre{
cursor:pointer;
}
</style>
<script type="text/javascript" src="http://mat1.gtimg.com/libs/jquery/1.12.0/jquery.js"></script>
</head>
<body>
<div class="list">
<div class="box">
<div class="div">
<img src="http://img.esthetics.cn/Uploads/Picture/2018-09-14/5b9b7f9428173.jpg" />
</div>
<div class="div">
<img src="http://img.esthetics.cn/Uploads/Picture/2018-09-14/5b9b7f9428173.jpg" />
</div>
<div class="div">
<img src="http://img.esthetics.cn/Uploads/Picture/2018-09-14/5b9b7f9428173.jpg" />
</div>
<div class="div">
<img src="http://img.esthetics.cn/Uploads/Picture/2018-09-14/5b9b7f9428173.jpg" />
</div>
<div class="div">
<img src="http://img.esthetics.cn/Uploads/Picture/2018-09-14/5b9b7f9428173.jpg" />
</div>
</div>
</div>
<div>
<span class="pre">上一个</span>
<span class="next">下一个</span>
</div>
<script type="text/javascript">
var ord = 0;
function changeTo(ord){
$(".list .box").stop(true,false).animate({ "left" : -ord*150},1000);
}
$(".pre").click(function (ev) {
ord = ord > 0 ? --ord : $(".div").length -1;
changeTo(ord);
});
$(".next").click(function (ev) {
ord = ord < ($(".div").length-1)? ++ord : 0;
changeTo(ord);
});
</script>
</body>
</html>
