<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>平滑移动</title>
<script type="text/javascript" src="http://s.juancdn.com/_/js/jquery.min.js?t=201301090006"></script>
<style type="text/css">
#box_c {
position: absolute;
height: 250px;
width: 500px;
overflow: hidden;
}
#box_c #list {
height: 250px;
background-color: #CCC;
left: 0px;
position: relative;
width: 2000px;
}
</style>
</head>
<body>
<div id="box_c">
<div id="t"><a id="q_left" href="#"><<< </a><a id="q_right" href="#">>>></a> <a id="q" href="#">自动</a></div>
<div id="list">123456789asdfghjklqwertyuiopzxcvbnm123456789asdfghjklqwertyuiopzxcvbnm123456789asdfghjklqwertyuiopzxcvbnm123456789asdfghjklqwertyuiopzxcvbnm123456789asdfghjklqwertyuiopzxcvbnm123456789asdfghjklqwertyuiopzxcvbnm123456789asdfghjklqwertyuiopzxcvbnm</div>
</div>
<script type="text/javascript">
var type = 2; // 1 + 2 -
(function($){
var moveNum = 715; //每次移动像素 -1430px
var width_num = parseInt($("#list").css('width'));
$("#q_right").click(function(){
var left = parseInt($("#list").css("left")) - moveNum;
if((left + width_num) <= 0){
left = 0;
}
$("#list").animate({'left': left}, "slow");
});
$("#q_left").click(function(){
var left = parseInt($("#list").css("left")) + moveNum;
if(left > 0){
left = -width_num + moveNum;
}
$("#list").animate({'left': left}, "slow");
});
setTimeout("yidong()",3000);
$("#q").click(function(){
var left = 0;
if(type==1){
left = parseInt($("#list").css("left"))+1000;
if(left >= 500){
left = 0;
type = 2;
}
} else {
left = parseInt($("#list").css("left"))-1000;
if((left+2000) <= 0){
left = -2000+500;
type = 1;
}
}
$("#list").animate({'left': left}, "slow");
});
})(jQuery);
function yidong(){
var left = 0;
if(type==1){
left = parseInt($("#list").css("left"))+1000;
if(left >= 500){
left = 0;
type = 2;
}
} else {
left = parseInt($("#list").css("left"))-1000;
if((left+2000) <= 0){
left = -2000+500;
type = 1;
}
}
$("#list").animate({'left': left}, "slow");
setTimeout("yidong()",3000);
}
</script>
</body>
</html>