这段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>
司马仲达0回答
随时随地看视频慕课网APP
相关分类
JQuery