js图片切换出现问题

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>

慕仙6733315

浏览 1519回答 2

2回答

逆光之羽

还好自定义文件里面只有一个简单的$函数自己补了一个总算能调了真心给跪你写的图片切换函数本身有问题,你用的应该是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

0

随时随地看视频慕课网APP

相关分类

JavaScript