從最后一張圖片切換到第一張圖片，，或者從第一張到最后一張有空白咋回事，，，找好久都沒找出來。。求大神指教<!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:0;">? ? ?<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="1"/>? ? ?</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]); } function fn(){ for(var k=0;k<Btn.length;k++){ Btn[k].className=''; } Btn[iNow].className="on"; } //上一張 Prev.onclick=function(){ if(iNow==0){ iNow=arr.length; } moveLeft(List,-iNow*oImg[0].offsetWidth,-(iNow-1)*oImg[0].offsetWidth); iNow--; fn(); } //下一張 Next.onclick=function(){ if(iNow==arr.length-1){ iNow=-1; } moveLeft(List,-iNow*oImg[0].offsetWidth,-(iNow+1)*oImg[0].offsetWidth); iNow++; fn(); } } //滾動緩沖函數 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) } function $( v ){ if( typeof v === 'function' ){ window.onload = v; } else if ( typeof v === 'string' ) { return document.getElementById(v); } else if ( typeof v === 'object' ) { return v; }} </script></html>
js圖片切換
慕仙6733315
2017-01-18 14:55:27
