投影片效果代碼(asp版本)

來源:互聯網
上載者:User

動態投影片效果,我們通常能通過查看源代碼檔案看到這種效果的代碼,一種javascript的代碼,能否將圖片和圖片的串連地址用動態程式來操作.現以asp語言講述這種效果的製作.

首先呢,要書寫asp代碼片段,範例如下
<%
set rs = server.CreateObject ("adodb.recordset")
sql = "select  top 3 * from picnews where ifshow=1"
rs.open sql,conn,1,1

         pic1=rs("imgurl")
         link1=rs("piclink")
         rs.movenext

         pic2=rs("imgurl")
         link2=rs("piclink")
         rs.movenext

         link3=rs("picurl")  
         pic3=rs("imglink")   
         rs.close
         set rs=nothing
%>
                   
代碼片段的作用是用來定義三張圖片和三個片對應的串連,比較簡單

然後書寫javascript代碼片段,把三個圖片的地址和串連目標用以上的三個變數分別替換出來

<script language=JavaScript>
var imgUrl=new Array();
var imgLink=new Array();
var adNum=0;
imgUrl[1]="<%=pic1%>";
imgLink[1]="<%=link1%>";
imgUrl[2]="<%=pic2%>";
imgLink[2]="<%=link2%>";
imgUrl[3]="<%=pic3%>";
imgLink[3]="<%=link3%>";
var imgPre=new Array();
var j=0;
for (i=1;i<=3;i++) {
if( (imgUrl[i]!="") && (imgLink[i]!="") ) {
  j++;
} else {
  break;
}
}
function playTran(){
if (document.all){
  document.imgInit.filters[0].play();
}
}
function nextAd(){
if(adNum<j)adNum++ ;
else adNum=1;
if (document.all){
  document.imgInit.filters[0].Transition=26;
  document.imgInit.filters[0].apply();
}
document.images.imgInit.src="/imgUrl[adNum]";
playTran();
theTimer=setTimeout("nextAd()", 4000); //兩秒周期 迴圈調用本身( nextAd() )
}
function goUrl(){
jumpUrl=imgLink[adNum];
jumpTarget='_blank';
if (jumpUrl != ''){
  if (jumpTarget != '')  //相當於a標籤的target屬性,如果有指定則新開視窗
   window.open(jumpUrl,jumpTarget);
  else //沒有指定target屬性則在本視窗開啟
   location.href="/jumpUrl";
}
}
</script>

最後一步,就是在需要的位置來調用這個圖片效果了

<a href="javascript:goUrl()"><img style="border: 1 solid #000000; padding: 1;FILTER: progid:DXImageTransform.Microsoft.RevealTrans (duration=1,transition=3);
; border-color:#000000;color:#000000;margin-bottom:0px" src="javascript:nextAd()" width="156" height="190" border=0 name=imgInit> 

這樣,一個動態投影片效果就被做出來了!

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.