/p>
img {
margin: 0;
padding: 0;
}
#content {
width: 1084px;
height: 525px;
margin: 20px auto;
position: relative;
overflow: hidden;
}
img {
display: inline;
position: absolute;
}
#i1 {
width: 844px;
height: 525px;
z-index: 400;
}
#i2 {
width: 904px;
height: 525px;
z-index: 300;
}
#i3 {
width: 964px;
height: 525px;
z-index: 200;
}
#q1 {
left: 844px;
z-index: 400;
}
#q2 {
left: 904px;
z-index: 400;
}
#q3 {
left: 964px;
z-index: 400;
}
#q4 {
left: 1024px;
z-index: 400;
}
#q1,
#q2,
#q3 {
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
#q1,
#q2,
#q3,
#q4 {
cursor: pointer;
]
}
$(document).ready(function () {
$(“#q4”).click(function () {
$(“#q1”).stop(true, true).animate({ left: “0” }, 400);
$(“#q2”).stop(true, true).animate({ left: “60px” }, 400);
$(“#q3”).stop(true, true).animate({ left: “120px” }, 400);
//$(“#small img:lt($num)”).animate({left:”-844px”},1000);
$(“#i1,#i2,#i3”).stop(true, true).animate({ left: “-844px” }, 400);
});
$(“#q1”).click(function () {
var $num3 = parseInt($(“#q3”).
var $num2 = parseInt($(“#q2”).
var $num1 = parseInt($(“#q1”).
if ($num1 < 844) {
if ($num3 < 964 && $num2 < 904) {
$(“#q1”).stop(true, true).animate({ left: “844” }, 400);
$(“#q2”).stop(true, true).animate({ left: “904px” }, 400);
$(“#q3”).stop(true, true).animate({ left: “964px” }, 400);
$(“#i1,#i2,#i3”).stop(true).animate({ left: “0” }, 400);
}
if ($num3 >= 964 && $num2 < 904) {
$(“#q1”).stop(true, true).animate({ left: “844” }, 400);
$(“#q2”).stop(true, true).animate({ left: “904px” }, 400);
$(“#i1,#i2”).stop(true, true).animate({ left: “0” }, 400);
}
if ($num3 >= 964 && $num2 >= 904) {
$(“#q1”).stop(true, true).animate({ left: “844” }, 400);
$(“#i1”).stop(true, true).animate({ left: “0” }, 400);
}
} else {
$(“#q1”).stop(true, true).animate({ left: “0” }, 400);
$(“#i1”).stop(true, true).animate({ left: “-844” }, 400);
}
});
$(“#q2”).click(function () {
var $num3 = parseInt($(“#q3”).
var $num2 = parseInt($(“#q2”).
if ($num2 < 904) {
if ($num3 < 964) {
$(“#q2”).stop(true, true).animate({ left: “904px” }, 400);
$(“#q3”).stop(true, true).animate({ left: “964px” }, 400);
$(“#i2,#i3”).stop(true, true).animate({ left: “0” }, 400);
} else {
$(“#q2”).stop(true, true).animate({ left: “904px” }, 400);
$(“#i2”).stop(true, true).animate({ left: “0” }, 400);
}
} else {
$(“#q1”).stop(true, true).animate({ left: “0” }, 400);
//$(“#small img:lt($num)”).animate({left:”-844px”},1000);
$(“#i1”).stop(true, true).animate({ left: “-844px” }, 400);
}
});
$(“#q3”).click(function () {
var $num3 = parseInt($(“#q3”).css(“left”));
if ($num3 < 964) {
$(“#q3”).stop(true, true).animate({ left: “964px” }, 400);
$(“#i3”).stop(true).animate({ left: “0” }, 400);
} else {
$(“#q1”).stop(true, true).animate({ left: “0px” }, 400);
$(“#q2”).stop(true, true).animate({ left: “60px” }, 400);
$(“#i1,#i2”).stop(true, true).animate({ left: “-844” }, 400);
}
});
})