無法實現無限循環
<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>
