JS實(shí)現(xiàn)多幅圖片分頁滾動(dòng)顯示

2012/11/8 11:56:50作者：佚名來源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

【實(shí)例描述】

本例可用于圖片新聞的展示，通過兩個(gè)div控件循環(huán)顯示所有的圖片?？尚薷谋纠械拇a調(diào)整圖片滾動(dòng)的速度。

【實(shí)現(xiàn)代碼】

	<html xmlns="http://www.w3.org/1999/xhtml" >

	<head>

	<title>標(biāo)題頁-學(xué)無憂（www.wangbatian.cn）</title>

	<SCRIPT language="JavaScript">

	var scrollerwidth=90         //指定div的高度

	var scrollerheight=32        //指定div的寬度

	var scrollerbgcolor='white'

	var pausebetweenimages=3000   //圖片的間隔時(shí)間，默認(rèn)為3秒。

	//帶鏈接的圖片，存放在數(shù)組中

	var slideimages=new Array()

	slideimages[0]='<A href="http://www.baidu.com"  target=_blank>

	<IMG alt=百度搜索 border=0 

	height=40 src=http://www.baidu.com/img/logo.gif width=100></A>'

	slideimages[1]='<A href=http://www.google.cn target=_blank>

	<IMG alt=google搜索 border=0 height=40 

	src=http://www.google.cn/intl/zh-CN/images/logo_cn.gif width=100></A>'

	slideimages[2]='<A href=# target=_blank>

	<IMG alt=廣告位置為你準(zhǔn)備 border=0 height=40 src="" width=100></A>'

	slideimages[3]='<A href=http://www.google.cn target=_blank>

	<IMG alt=google搜索 border=0 height=40 

	src=http://www.google.cn/intl/zh-CN/images/logo_cn.gif width=100></A>'

	if (slideimages.length>1)

	i=2    //初始化一個(gè)變量，用來做圖片數(shù)組的索引

	else

	i=0

	function move1(mydiv)

	{

	    tdiv=eval(mydiv) //獲取div對象

	    if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=4){ 

	//判斷div的y坐標(biāo)

	        tdiv.style.pixelTop=0                         

	  //指定div的y坐標(biāo)

	        setTimeout("move1(tdiv)",pausebetweenimages)    

	//設(shè)置轉(zhuǎn)換的時(shí)間間隔

	        setTimeout("move2(secondDiv)",pausebetweenimages)

	        return

	    }

	    if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){     

	        tdiv.style.pixelTop-=5                        

	//div開始往上滾動(dòng)

	        setTimeout("move1(tdiv)",100)                 

	    }

	    else{

	        tdiv.style.pixelTop=scrollerheight         

	//指定div的高度

	        tdiv.innerHTML=slideimages[i]             

	  //將圖片顯示在div中

	        if (i==slideimages.length-1 )             

	  //如果已經(jīng)循環(huán)到底，再從第一張開始循環(huán)

	          i=0

	        else

	          i++

	    }

	}

	function move2(mydiv)

	{

	    tdiv2=eval(mydiv)                                   

	//獲取第二個(gè)div

	    if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=4){

	//判斷div的y坐標(biāo)

	        tdiv2.style.pixelTop=0                           

	//指定div的y坐標(biāo)

	        setTimeout("move2(tdiv2)",pausebetweenimages)   

	//設(shè)置轉(zhuǎn)換的時(shí)間間隔

	        setTimeout("move1(firstDiv)",pausebetweenimages)

	        return

	    }

	    if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){

	        tdiv2.style.pixelTop-=5                   

	//第二個(gè)div開始向上滾動(dòng)

	        setTimeout("move2(secondDiv)",100)

	    }

	    else{

	        tdiv2.style.pixelTop=scrollerheight      

	//指定第二個(gè)div的高度

	        tdiv2.innerHTML=slideimages[i]            

	//將圖片顯示在div中

	        if (i==slideimages.length -1)              

	//如果已經(jīng)循環(huán)到底，再從第一張開始循環(huán)

	        i=0

	        else

	        i++

	    }

	}

	function startscroll()                    

	//調(diào)用實(shí)現(xiàn)div層移動(dòng)的方法

	{

	    if (document.all){

	        move1(firstDiv)

	        secondDiv.style.top=scrollerheight

	//設(shè)置第二章圖片的位置

	    }

	}
	window.onload=startscroll                 

	//窗體一架載，便開始顯示圖片

	</SCRIPT>

	</head>

	<body>

	<SCRIPT language="JavaScript">

	if (document.all){

	    document.writeln('<span id="main2" style="position:relative;

	width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hiden;

	background-color:'+scrollerbgcolor+'">')

	    document.writeln('<div style="position:absolute;

	width:'+scrollerwidth+';height:'+scrollerheight+';

	clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0;top:0">')

	    document.writeln('<div id="firstDiv" 

	style="position:absolute;width:'+scrollerwidth+';left:0;top:1;">')

	    document.write(slideimages[0])

	    document.writeln('</div>')

	    document.writeln('<div id="secondDiv" 

	style="position:absolute;width:'+scrollerwidth+';left:0;top:0">')

	    document.write(slideimages[1])

	    document.writeln('</div>')

	    document.writeln('</div>')

	    document.writeln('</span>')

	}

	</SCRIPT>

	</body>

	</html>

【運(yùn)行效果】

多幅圖片分頁滾動(dòng)顯示運(yùn)行效果

【難點(diǎn)剖析】

本例重點(diǎn)是使用兩個(gè)diV循環(huán)顯示所有的圖片。為了屏蔽diV的圖層，需要將窗體的背景色設(shè)置為“white”(白色)。然后將第一個(gè)div的Y坐標(biāo)設(shè)置為“1”，指定時(shí)間過后再讓此div的y坐標(biāo)自動(dòng)減小，實(shí)現(xiàn)圖層上移的效果。然后設(shè)置第二個(gè)div的y坐標(biāo)，實(shí)現(xiàn)第二張圖片的顯示，依次循環(huán)顯示所有的圖片。

【源碼下載】

為了JS代碼的準(zhǔn)確性，請點(diǎn)擊：JS實(shí)現(xiàn)多幅圖片分頁滾動(dòng)顯示進(jìn)行本實(shí)例源碼下載

標(biāo)簽：圖片顯示