軟件
                        
    
                            
  • 綜合
    • 
                            
  • 軟件
    • 
                            
  • 文章
    • 
                            
  • 安卓
    • 
                        

                    
搜索

            

            

                pscc2017autocad2018dreamweaver2017草圖大師2017Visio 2016
            

        

    



  

    

      
    

  





  
 當前位置：軟件學堂 > 資訊首頁 > 網絡編程 > 編程其他 > JS實現多幅圖片分頁滾動顯示 





  

    
    

      
      

        
JS實現多幅圖片分頁滾動顯示

        
2012/11/8 11:56:50作者：佚名來源：網絡

        
移動端
          

        

      

      
            
【實例名稱】
JS實現多幅圖片分頁滾動顯示
【實例描述】
本例可用于圖片新聞的展示，通過兩個div控件循環顯示所有的圖片?？尚薷谋纠械拇a調整圖片滾動的速度。
【實現代碼】
	<html xmlns="http://www.w3.org/1999/xhtml" >

	<head>

	<title>標題頁-學無憂（www.yzddtk.cn）</title>

	<SCRIPT language="JavaScript">

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

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

	var scrollerbgcolor='white'

	var pausebetweenimages=3000   //圖片的間隔時間，默認為3秒。

	//帶鏈接的圖片，存放在數組中

	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=廣告位置為你準備 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    //初始化一個變量，用來做圖片數組的索引

	else

	i=0

	function move1(mydiv)

	{

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

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

	//判斷div的y坐標

	        tdiv.style.pixelTop=0                         

	  //指定div的y坐標

	        setTimeout("move1(tdiv)",pausebetweenimages)    

	//設置轉換的時間間隔

	        setTimeout("move2(secondDiv)",pausebetweenimages)

	        return

	    }

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

	        tdiv.style.pixelTop-=5                        

	//div開始往上滾動

	        setTimeout("move1(tdiv)",100)                 

	    }

	    else{

	        tdiv.style.pixelTop=scrollerheight         

	//指定div的高度

	        tdiv.innerHTML=slideimages[i]             

	  //將圖片顯示在div中

	        if (i==slideimages.length-1 )             

	  //如果已經循環到底，再從第一張開始循環

	          i=0

	        else

	          i++

	    }

	}

	function move2(mydiv)

	{

	    tdiv2=eval(mydiv)                                   

	//獲取第二個div

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

	//判斷div的y坐標

	        tdiv2.style.pixelTop=0                           

	//指定div的y坐標

	        setTimeout("move2(tdiv2)",pausebetweenimages)   

	//設置轉換的時間間隔

	        setTimeout("move1(firstDiv)",pausebetweenimages)

	        return

	    }

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

	        tdiv2.style.pixelTop-=5                   

	//第二個div開始向上滾動

	        setTimeout("move2(secondDiv)",100)

	    }

	    else{

	        tdiv2.style.pixelTop=scrollerheight      

	//指定第二個div的高度

	        tdiv2.innerHTML=slideimages[i]            

	//將圖片顯示在div中

	        if (i==slideimages.length -1)              

	//如果已經循環到底，再從第一張開始循環

	        i=0

	        else

	        i++

	    }

	}

	function startscroll()                    

	//調用實現div層移動的方法

	{

	    if (document.all){

	        move1(firstDiv)

	        secondDiv.style.top=scrollerheight

	//設置第二章圖片的位置

	    }

	}
	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>

【運行效果】
 多幅圖片分頁滾動顯示運行效果
【難點剖析】
本例重點是使用兩個diV循環顯示所有的圖片。為了屏蔽diV的圖層，需要將窗體的背景色設置為“white”(白色)。然后將第一個div的Y坐標設置為“1”，指定時間過后再讓此div的y坐標自動減小，實現圖層上移的效果。然后設置第二個div的y坐標，實現第二張圖片的顯示，依次循環顯示所有的圖片。
【源碼下載】
為了JS代碼的準確性，請點擊：JS實現多幅圖片分頁滾動顯示 進行本實例源碼下載 

      
      

        

          
       

        

      

      
      

        
標簽：
          圖片            

        
      

      
      

        
相關文章

        
      

      
      

        
 熱門軟件/ 推薦游戲/ 手機軟件 

        

          
          
          
          
          
          
        

      

      
      

        

      

      
    


    
    

      

        
資訊分類

      

      

                Dreamweaver
                Flash
                DIV+CSS
                編程其他
              

      

        
推薦教程

      

      

        
      

      

        
精品軟件推薦

      

      

        

          

          
        

      

    

  






            
 ∧ 

        

    


    

        

            Copyright2012-2022 軟件學堂(www.yzddtk.cn).All Rights Reserved

            備案編號:贛ICP備2023000421號
                    

    





欧美一级一极性活片免费观看,欧美一级艳片欧美精品,欧美一级性爱大片,欧美一级囗交视频 视频,欧美一级特黄录像视频