无法实现无限循环
<script type="text/javascript">
window.onload = function(){
<!--获取元素值-->
var container = document.getElementById('PicsBox');
var list = document.getElementById('list');
var buttons = document.getElementById('buttons').getElementsByTagName('span');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
function animate(offset){
list.style.left= parseInt(list.style.left) + offset + 'px';
<!--无限循环-->
var newLeft = parseInt(list.style.left) + offset;
list.style.left= newLeft + 'px';
if(newLeft >-877){
list.style.left = -3508 + 'px';
}
if(newLeft < -3508){
list.style.left = -877 + 'px';
}
}
<!--鼠标点击事件绑定-->
next.onclick = function(){
animate(-877);
}
prev.onclick = function(){
animate(877);
}
}
</script>
<link rel="shortcut icon" href="WebIcon.ico" />
</head>
<body>
<div class="OutSidevessel">
<!--导航栏-->
<div class="Leftdaohang"> <a href="">首页</a> |
<a href="">定制</a> |
<a href="">陶</a> |
</div>
<div class="Centermain" > <!--中间容器-->
<!--Banner显示-->
<div class="topbanner">
<div id="PicsBox"><!--图片存储盒-->
<div id="list" style="left:-877px;">
<img src="sanjiao.jpg" alt=""/>
<img src="BannerFirst-01.jpg" />
<img src="fang.jpg" />
<img src="yuan.jpg" />
<img src="sanjiao.jpg" />
<img src="BannerFirst-01.jpg" />
</div>
<div id="buttons"> <!--图片按钮-->
<span index="1" class="on"></span>
<span index="2" ></span>
<span index="3"></span>
<span index="4"></span>
</div>
<a href="javascript:;" id="prev" class="arrow" style="float:left; background:url(%E7%AE%AD%E5%A4%B4%E5%B7%A6.png); position:absolute; left:1%;"></a>
<a href="javascript:;g" id="next" class="arrow" style="float:right; background:url(%E7%AE%AD%E5%A4%B4%E5%8F%B3.png); position:absolute; left:94%;"></a>
