<!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>
添加回答
举报
0/150
提交
取消