标签：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图片切换</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
.imgBox{width:1020px;height:400px;position:relative;overflow:hidden;}
a{
width:700px;height:400px;display:block;position: absolute;
transition: 1s ease;-o-transition: 1s ease;-webkit-transition: 1s ease;
-ms-transition: 1s ease;-moz-transition: 1s ease;
}
img{width:700px;height:400px;border: 0px;}
</style>
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
//图片总数
var imgCount=$(".imgBox a").size();
//赋初始left值
var defaultLeft=0;
for(var i=0;i<imgCount;i++){
$(".imgBox a:eq("+i+")").css("left",defaultLeft+"px");
defaultLeft+=80;
}
//计算图片宽度
var imgWidth=parseInt($(".imgBox a img").css("width"));
$(".imgBox a").mouseover(function(){
var index=$(this).index();
var left=parseInt($(this).css("left"));
switch (index){
case 0:
$(".imgBox a:eq(1)").css("left","700px");
$(".imgBox a:eq(2)").css("left","780px");
$(".imgBox a:eq(3)").css("left","860px");
$(".imgBox a:eq(4)").css("left","940px");
break;
case 1:
if(left>=imgWidth){
$(this).css("left","80px");
}else{
$(".imgBox a:eq(2)").css("left",(imgWidth+80)+"px");
$(".imgBox a:eq(3)").css("left",(imgWidth+160)+"px");
$(".imgBox a:eq(4)").css("left",(imgWidth+240)+"px");
}
break;
case 2:
if(left>=780){
$(".imgBox a:eq(1)").css("left","80px");
$(this).css("left","160px");
}else{
$(".imgBox a:eq(3)").css("left",(imgWidth+160)+"px");
$(".imgBox a:eq(4)").css("left",(imgWidth+240)+"px");
}
break;
case 3:
if(left>=860){
$(".imgBox a:eq(1)").css("left","80px");
$(".imgBox a:eq(2)").css("left","160px");
$(this).css("left","240px");
}else{
$(".imgBox a:eq(4)").css("left",(imgWidth+240)+"px");
}
break;
case 4:
if(left>=940){
$(".imgBox a:eq(1)").css("left","80px");
$(".imgBox a:eq(2)").css("left","160px");
$(".imgBox a:eq(3)").css("left","240px");
$(this).css("left","320px");
}
break;
default :
break;
}
});
})
</script>
</head>
<body>
<div class="imgBox">
<a href="#"><img src="images/1.jpg" title="" alt=""/></a>
<a href="#"><img src="images/2.jpg" title="" alt=""/></a>
<a href="#"><img src="images/3.jpg" title="" alt=""/></a>
<a href="#"><img src="images/4.jpg" title="" alt=""/></a>
<a href="#"><img src="images/5.jpg" title="" alt=""/></a>
</div>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/lingchuang/p/4481609.html
