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

                    
搜索

            

            

                pscc2017autocad2018dreamweaver2017草圖大師2017Visio 2016
            

        

    



  

    

      
    

  





  
 當前位置：軟件學堂 > 資訊首頁 > 網絡編程 > 編程其他 > JS實現圖片切換的特殊效果 





  

    
    

      
      

        
JS實現圖片切換的特殊效果

        
2012/11/8 10:12:18作者：佚名來源：網絡

        
移動端
          

        

      

      
            
【實例名稱】
JS實現圖片切換的特殊效果
【實例描述】
為了增加頁面的美觀性，在進行圖片切換時通常使用類似幻燈片的效果。本例介紹如何實現這種圖片切換的特殊效果。
【實例代碼】
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>無標題頁-學無憂（www.yzddtk.cn）</title>
<script language="javascript">
var imgUrl=new Array();
var imgLink=new Array();
var adNum=0;
var jumpUrl="http://pic.music.tom.com/view/35611/tid-35611-pid-1.html";
imgLink[1]="http://pic.music.tom.com/view/35611";
imgLink[2]="http://pic.music.tom.com";
imgUrl[1]="http://cimg.163.com/tech/2006/1/18/2006011810122068706.jpg";
imgUrl[2]="http://cimg.163.com/tech/2006/1/17/200601171002503f251.jpg";
var imgPre=new Array();
var j=0;
for (i=1;i<=imgUrl.length-1;i++) 
{
 if(imgLink[i]!="") {j++;} 
 else {break;}
}
function playTran()
{
 if (document.all)
  imgInit.filters.revealTrans.play();
}
var key=0;
//循環顯示圖片
function nextAd()
{
 if(adNum<j)adNum++ ;
 else adNum=1;
 if( key==0 ){key=1;} 
 else if (document.all){
  imgInit.filters.revealTrans.Transition=6;
  imgInit.filters.revealTrans.apply();
  playTran();
 }
 document.images.imgInit.src=imgUrl[adNum];
 jumpUrl=imgLink[adNum];
 theTimer=setTimeout("nextAd()", 7000);
}
//單擊圖片時實現導航
function goUrl()
{ 
 if (jumpUrl != ''){
  if (jumpTarget != '') window.open(jumpUrl,'_blank');
  else location.href=jumpUrl;
 }
}
</script>
需要在body中添加一個鏈接，代碼如下所示:
</head>
<body>
<a href="javascript:goUrl()"><img style=
"FILTER:revealTrans(duration=2,transition=7);
border:1 solid black" 
src="javascript:nextAd()" width="300" border="0" 
name="imgInit" height="210"></a>
</body>
</html>

 
【運行效果】
 圖片切換的特殊效果運行效果
【難點剖析】
本例的重點是調用了CSS中的濾鏡“revealTrans”，“transition”參數表示圖片切換的樣式，如可以是卷簾、溶解等效果，其取值局限于I～23之間。
【源碼下載】
為了JS代碼的準確性，請點擊：JS實現圖片切換的特殊效果 進行本實例源碼下載 

      
      

        

          
       

        

      

      
      

        
標簽：
          圖片            

        
      

      
      

        
相關文章

        
      

      
      

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

        

          
          
          
          
          
          
        

      

      
      

        

      

      
    


    
    

      

        
資訊分類

      

      

                Dreamweaver
                Flash
                DIV+CSS
                編程其他
              

      

        
推薦教程

      

      

        
      

      

        
精品軟件推薦

      

      

        

          

          
        

      

    

  






            
 ∧ 

        

    


    

        

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

            備案編號:贛ICP備2023000421號
                    

    





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