js图片切换出现问题
每次当图片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>
慕仙67333152回答
-
逆光之羽
还好自定义文件里面只有一个简单的$函数 自己补了一个总算能调了 真心给跪你写的图片切换函数本身有问题,你用的应该是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++; } }
随时随地看视频慕课网APP
相关分类
JavaScript