这段jq代码如何实现无限滚动？

<!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>
<style>
a:focus{ outline:0;}
button:focus{ outline:0;}
li{ list-style:none}
.box{ width:600px; position:relative; height:270px; }
ul,body{ margin:0; padding:0}
#thepic{ width:3600px; height:270px; z-index:1; position:absolute; left:-600px; }
#thepic li{ float:left}
.btt{ position:relative; z-index:5}
#btn1{ background:url(img/btnleft.png) no-repeat; outline:none; border:0px; cursor:pointer;width:29px; height:28px; position:absolute; top:115px}
#btn2{background:url(img/btnright.png) no-repeat; outline:none; border:0px; cursor:pointer; width:29px; height:28px; position:absolute; top:115px; left:572px;}
</style>

<script src="jquery.js" language="javascript" type="text/javascript"></script>
<script>

$(document).ready(function() {
   var wwt=document.getElementById('thepic');

    $('#btn1').click(function(){
           $('#thepic').animate({left:'-=600px'});

     if(wwt.style.left<-2600+'px'){
            $('#thepic').animate({left:"-600px"});

       }
           return
});
       $('#btn2').click(function(){
            $('#thepic').animate({left:'+=600px'});
              if(wwt.style.left>-200+'px'){
           $('#thepic').animate({left:"-2400px"})
   }

});
});
</script>
</head>
<body>
<div class="box">
<div class="btt">
<button id="btn1"></button>
<button id="btn2"></button>
</div>
<div id="thepic" >
<li><img src="img/zhutingqi.png" width="600" height="270" /></li>
<li><img src="img/ceyan.png" width="600" height="270" /></li>
<li><img src="img/productimg.png" width="600" height="270" /></li>
<li><img src="img/slide-2.jpg" width="600" height="270" /></li>
<li><img src="img/zhutingqi.png" width="600" height="270" /></li>
<li><img src="img/ceyan.png" width="600" height="270" /></li>
</div>
</div>
</body>
</html>

司马仲达

浏览 1850回答 0