<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.con{
overflow: hidden;
position: relative;
margin: 200px auto 0;
width: 320px;
height: 220px;
padding: 20px;
border: 1px solid #000;
}
.main{
position: absolute;
left: 0;
top: 0;
width: 360px;
height: 260px;
}
.rq{
width: 1080px;
height: 260px;
}
.rq img{
float: left;
width: 360px;
height: 260px;
}
ul{
position: relative;
left: 50%;
bottom: -20px;
margin-left: -30px;
}
li{
float: left;
width: 10px;
height: 10px;
margin-right: 10px;
background: #f00;
border-radius: 50%;
cursor: pointer;
cursor: hand;
}
li:hover{
background: #000;
}
</style>
</head>
<body>
</div>
</div>
</div>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$('ul li').eq(0).click(function(){
$('.main').stop().animate({
left : '0px'
})
})
$('ul li').eq(1).click(function(){
$('.main').stop().animate({
left : '-360px'
})
})
$('ul li').eq(2).click(function(){
$('.main').stop().animate({
left : '-720px'
})
})
</script>
</html>
