<style>
*{
margin:0;
padding: 0;
list-style-type: none;
}
.box{
width: 680px;
height: 300px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.box div{
width: 590px;
height: 300px;
position: absolute;
left: 0;
top: 0;
}
.box span{
width: 30px;
height: 300px;
display: block;
float:left;
background: darkgreen;
}
.box img{
float: right;
}
.num2 span{
background: orange;
}
.num3 span{
background: lightblue;
}
.num4 span{
background: pink;
}
.box .num2{
left:590px;
}
.box .num3{
left:620px;
}
.box .num4{
left: 650px;
}
</style>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function() {
$('.num1 span').mouseover(function(){
/*
590
620
650
*/
$('.num2').stop().animate({left:590}, 500);
$('.num3').stop().animate({left:620}, 500);
$('.num4').stop().animate({left:650}, 500);
})
$('.num2 span').mouseover(function(){
/*
2 30
3 620
4 650
*/
$(this).parent().stop().animate({left:30}, 500);
$('.num3').stop().animate({left:620}, 500);
$('.num4').stop().animate({left:650}, 500);
})
$('.num3 span').mouseover(function(){
/* 鼠标经过3
2 30
3 60
4 650*/
$(this).parent().stop().animate({left:60}, 500);
//num2
$('.num2').stop().animate({left:30}, 500);
$('.num4').stop().animate({left:650},500);
})
$('.num4 span').mouseover(function(){
/* 2 30
3 60
4 90*/
$(this).parent().stop().animate({left:90},500);
$('.num2').stop().animate({left:30}, 500);
$('.num3').stop().animate({left:60}, 500);
})
});
</script>
</head>
<body>
<div class="box">
<div class="num1">
<span>1</span>
<img src="images/1.jpg" height="300" width="560" alt="" />
</div>
<div class="num2">
<span>2</span>
<img src="images/2.jpg" height="300" width="560" alt="" />
</div>
<div class="num3">
<span>3</span>
<img src="images/3.jpg" height="300" width="560" alt="" />
</div>
<div class="num4">
<span>4</span>
<img src="images/4.jpg" height="300" width="560" alt="" />
</div>
</div>
