top: 0;
}
img:nth-of-type(1){
left: 0;
}
img:nth-of-type(2){
left: 84px;
}
img:nth-of-type(3){
left: 168px;
}
img:nth-of-type(4){
left: 252px;
}
img:nth-of-type(5){
left: 336px;
}
</style>
<div class="box">
<img src="http://tupian.enterdesk.com/2013/mxy/10/12/1/17.jpg">
<img src="http://tupian.enterdesk.com/2013/mxy/07/0715/1/7.jpg">
<img src="https://www.easck.com/d/file/200524/20200524212506852.jpg">
<img src="https://www.easck.com/d/file/200524/20200524212506853.jpg">
<img src="https://www.easck.com/d/file/200524/20200524212506854.jpg">
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
var lefts;
var idx;
$("img").each(function(){
$(this).mouseenter(function(e) {
idx = $(this).index();
lefts = idx * 35;
//当前图片的变化
$(this).stop(true).animate({"left" : idx * 35}, 1000);
});
})
当前图片能够愉快的玩耍了，接下来的重点就是其余图片怎么运动。
此时，我们可以把剩余的图片分成左右两部分，用jq 的 “:lt()” 和 “:gt()”方法写出剩余部分的效果。这里有一个小小的坑，自己也是绕了半天，最后还是别人提醒的才绕出来。
以当前图片左侧动画效果为例，最开始我是这么写的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style type="text/css">
div{
width: 420px;
height: 186px;
border: 2px solid #ccc;
overflow: hidden;
position: relative;
margin: 100px auto;
}
img{
border: none;
display: block;
position: absolute;
top: 0;
}
img:nth-of-type(1){
left: 0;
}
img:nth-of-type(2){
left: 84px;
}
img:nth-of-type(3){
left: 168px;
}
img:nth-of-type(4){
left: 252px;
}
img:nth-of-type(5){
left: 336px;
}
</style>
<div class="box">
<img src="http://tupian.enterdesk.com/2013/mxy/10/12/1/17.jpg">
<img src="http://tupian.enterdesk.com/2013/mxy/07/0715/1/7.jpg">
<img src="https://www.easck.com/d/file/200524/20200524212506852.jpg">
<img src="https://www.easck.com/d/file/200524/20200524212506853.jpg">
<img src="https://www.easck.com/d/file/200524/20200524212506854.jpg">
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
var lefts;
var idx;
$("img").each(function(){
$(this).mouseenter(function(e) {
idx = $(this).index();
lefts = idx * 35;
//当前图片的变化
