<head>
<script src="../Scripts/jquery-1.10.2.js"></script>
<meta charset="utf-8"/>
<style type="text/css">
body{
margin:0 auto;
}
#div1{
800px;
height:600px;
border:1px solid red;
}
#img1{
800px;
height:600px;
position:absolute;
left:1px;
}
#img2,#img3{
800px;
height:600px;
position:absolute;
left:-800px;
}
#div2{
bottom:0px;
position:relative;
top:580px;
left:700px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
var i = $(this).text();
if (i == 1) {
$("#img1").animate({ 'left': '1px' });
$("#img2").css({ 'left': '-800px' });
$("#img3").css({ 'left': '-800px' });
} else if (i == 2) {
$("#img2").animate({ 'left': '1px' });
$("#img1").css({ 'left': '-800px' });
$("#img3").css({ 'left': '-800px' });
} else if (i == 3) {
$("#img3").animate({ 'left': '1px' });
$("#img2").css({ 'left': '-800px' });
$("#img1").css({ 'left': '-800px' });
}
else {
return;
}
})
})
</script>
</head>
<body>
<div id="div1">
<a href="http://www.baidu.com/"><img id="img1" src="../images/1.jpg" /></a>
<a href="http://www.sina.com.cn/"><img id="img2" src="../images/2.jpg" /></a>
<a href="http://www.qq.com/"><img id="img3" src="../images/4.jpg" /></a>
<div id="div2"><button>1</button><button>2</button><button>3</button></div>
</div>
</body>