<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js"></script>
<style>
body,ul{margin: 0; padding: 0; list-style: none;}
.w{width: 1300px; position: relative;margin: 50px auto; overflow: hidden;}
.qiehuan{width:1200px; overflow: hidden;margin: 30px auto;}
.win{width: 1700px;overflow: hidden;}
.win li{float: left; text-align: center; line-height: 40px; background: #F2F2F2; margin: 5px; width: 100px;}
.you,.zuo{position: absolute; cursor: pointer;}
.you{right:0;top:40px}
.zuo{left: 0;top:40px}
</style>
</head>
<body>
<div class="w">
<div class="you">>></div>
<div class="zuo"><<</div>
<div id="s" class="qiehuan">
<ul class="win">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
</ul>
</div>
</div>
</body>
<script>
var n=1;
$(".you").click(function(){
var a=parseInt($('.win').css('marginLeft'))
if(a==0){
alert(a)
}else{
$(".win").stop().animate({marginLeft:100*n});//怎么在已经滚动的基础上-100
}
});
$(".zuo").click(function(){
var a=parseInt($('.win').css('marginLeft'))
if(a>=-400){
n++
alert(n)
$(".win").stop().animate({marginLeft:-100*n});
}else{
$(".win").css({marginLeft:0})//怎么可以无缝滚动
}
})
</script>
</html>