JS 怎么控制一次加载一张图片，加载完后再加载下一张

JavaScript029

JS 怎么控制一次加载一张图片，加载完后再加载下一张,第1张

(1)方法 1 <script type="text/javascript ">var obj=new Image()obj.src="http://www. phpernote.com/uplo adfiles/editor/20110 7240502201179.jpg"obj.onload=function（）

  { alert('图片的宽度为: '+obj.width+'图片的 高度为:'+obj.height)document.getElemen tById("mypic").innner HTML="<img src='"+this.src+"' />"

}

</script>

<div id="mypic">onloadi ng......</div>

方法 2

<script type="text/javascript ">

var obj=new Image()obj.src="http://www.phpernote.com/uploadfiles/editor/201107240502201179.jpg"

obj.onreadystatechange=function(){ if(this.readyState==" complete")  alert('图片的宽度为: '+obj.width+'图片的 高度为:'+obj.height)document.getElementById("mypic").innner HTML="<img src='"+this.src+"' />"

}

}

</script>

<div id="mypic">onloadi

要么用ajax，要么把图片都绑出来，设为隐藏，然后js控制第几张图片显示，要么把图片都绑出来做个div遮罩层。建议1、找个实例，右键--查看源码拿下别人的js2、换个方式，上百度搜索thickbox实例个人觉得thickbox效果还不错。

把图片名字设置成一样的 名字+（1-10）的编号+".jpg" 放在当前目录

<table><tr><td>><label onclick="PriImg()">上一张</label></td>><td><img id="imgid" src="img1.jpg" width="200" height="200" /></td><td><label onclick="NextImg()">下一张</label></td></tr></table>

function NextImg(){

var img=document.getElementById(“imgid”)

var nowImg=1

nowImg+=1

if(nowImg<=10){

img.src=“名字”+mowImg+".jpg"

}

}

function PriImg(){

var img=document.getElementById(“imgid”)

var nowImg=1

nowImg+=1

if(nowImg>=1){

img.src=“名字”+mowImg+".jpg"

}

}