每次當圖片left值為600和-3600時會出現空白怎么解決啊？？求教各位大神！<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">*{padding:0; margin:0; text-decoration:none;}body{padding:20px;}#container{width:600px; height:400px; border:3px solid black; overflow: hidden; position: relative;margin:0 auto ;}#list{width: 4200px; height: 400px; position: absolute; z-index: 1;}?#list img{float:left;}#buttons{position: absolute; height: 10px; width: 100px;z-index: 2; bottom: 20px; left:250px; }#buttons span{cursor: pointer; float:left;border:1px solid #fff;width:10px;height: 10px;border-radius: 50%;background: #333; margin-right: 5px; }#buttons .on{background: orangered;}.arrow{cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; ?position: absolute; z-index: 2;?top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}?.arrow:hover { background-color: RGBA(0,0,0,.7);}?#container:hover .arrow { display: block;}?#prev { left: 20px;}#next { right: 20px;} </style> </head> <body> <!--父容器--><div id="container"><div id="list" style="left:600;">? ?<img src="img/5.jpg" alt="1"/>? ? ?<img src="img/1.jpg" alt="1"/>? ? ?<img src="img/2.jpg" alt="2"/>? ? ? <img src="img/3.jpg" alt="3"/>? ? ? <img src="img/4.jpg" alt="4"/>? ? ? <img src="img/5.jpg" alt="5"/>? ? ?</div> <div id="buttons"><span class="on"></span><span ></span>? <span></span><span></span><span></span></div>?<a href="javascript:;" id="prev" class="arrow"><</a>? ? <a href="javascript:;" id="next" class="arrow">></a></div> </body> <script type="text/javascript" src="js庫/mySefl.js"></script> <script type="text/javascript"> window.onload=function(){ var container=$("container"); var List=$("list"); var oImg=List.getElementsByTagName('img'); var Btn=$('buttons').getElementsByTagName('span'); var Prev=$("prev"); var Next=$("next"); var iNow=0; var arr=[]; //把圖片放入數組 List.style.width=oImg.length*oImg[0].offsetWidth+"px"; for(var i=0;i<oImg.length;i++){ arr.push(oImg[i]); } //上一張 Prev.onclick=function(){ if(iNow==-1){ iNow=arr.length-1; List.style.left=-List.offsetWidth/6; } moveLeft(List,-iNow*oImg[0].offsetWidth,-(iNow-1)*oImg[0].offsetWidth); iNow--; } //下一張 Next.onclick=function(){ if(iNow==arr.length){ iNow=0; List.style.left=-List.offsetWidth/6; } moveLeft(List,-iNow*oImg[0].offsetWidth,-(iNow+1)*oImg[0].offsetWidth); iNow++; } } //滾動緩沖函數 function moveLeft(obj,old,now){ clearInterval(obj.timer); obj.timer=setInterval(function(){ //設置緩沖時間 var ispeed=(now-old)/10; ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed); if(now==old){ clearInterval(obj.timer); }else{ old=ispeed+old; obj.style.left=old+'px'; } },30) } </script></html>
js圖片切換出現問題
慕仙6733315
2016-09-30 11:06:30
