从最后一张图片切换到第一张图片，，或者从第一张到最后一张有空白咋回事，，，找好久都没找出来。。求大神指教<!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>
添加回答
举报
0/150
提交
取消