每次当图片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>
2 回答
已采纳
逆光之羽
TA贡献55条经验 获得超13个赞
还好自定义文件里面只有一个简单的$函数 自己补了一个总算能调了 真心给跪
你写的图片切换函数本身有问题,你用的应该是6张600px宽的图片进行切换吧?明明left属性的取值范围应该在0到3000px之间才正好显示那6张，但是你写的函数把600px和-3600px都跑出来了.....那位置本来就不存在图片肯定是空白吧.....
在你原来程序上稍微改了下，切换函数改成下面这个就行了
//上一张
Prev.onclick=function(){
if(iNow==0){
iNow=arr.length;
}
moveLeft(List,-iNow*oImg[0].offsetWidth,-(iNow-1)*oImg[0].offsetWidth);
iNow--;
}
//下一张
Next.onclick=function(){
if(iNow==arr.length-1){
iNow=-1;
}
moveLeft(List,-iNow*oImg[0].offsetWidth,-(iNow+1)*oImg[0].offsetWidth);
iNow++;
}
}
添加回答
举报
0/150
提交
取消