图像循环向右移动

人气：　来源：本站原创　作者：佚名　所属栏目：图片类　[切换到繁體中文]

介绍：图片从左到右循环出现。

演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>站长手册_特效演示_图像循环向右移动</title>
<style><!--body,td{font-size: 12px;}--></style>
<script language="javascript">
<!--
        //global variables

        var layerRef="null",layerStyleRef="null",styleSwitch="null";

 	var rightStopPoint="null";

 	var currRight=-800;

function init(){

  if (navigator.appName == "Netscape") {

        layerStyleRef="layer.";

        layerRef="document.layers";

        styleSwitch="";

        rightStopPoint=50;

  }else{

        layerStyleRef="layer.style.";

        layerRef="document.all";

        styleSwitch=".style";

        rightStopPoint="50px";

  }  

}

function moveLayerRight(layerName){ 

        if (eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.left != rightStopPoint')){

	currRight+=2;

 	eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.left = currRight');

	setTimeout('moveLayerRight("'+layerName+'")',2); 		 	
  }else{

	currRight=-800;

	eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.left = currRight');

	setTimeout('moveLayerRight("'+layerName+'")',2); 			

        }

}

//-->

</script>

<STYLE TYPE="text/css">

/*CREDITS LAYERS*/
#movingGhostR {POSITION: absolute; Z-INDEX: 100; VISIBILITY: visible; LEFT: -800; TOP: 40;}
</STYLE>
</head>
<body bgcolor="" onload="init();moveLayerRight('movingGhostR');">
<table width="100%" height="1000" border="0" cellpadding="10" cellspacing="5">
<tr>
<td valign="top">
<div id="movingGhostR" > 
            <table border=0 width="1500" height="120" >
              <tr> 
                <td> 
                  <center>
                    <img src="http://www.zzsc.org/texiao/zzsc_demo/07090701.gif" border=0> 
                  </center>
                </td>
              </tr>
            </table>
          </div>
</td>
</tr>
</table>
</body>
</html>

[Ctrl+A全选提示：你可先修改部分代码，再按运行]

下面教你如何应用此特效：
　--------------------------------------------------------------------------------------
　　需要在<body 这里>加入的代码：onload="init();moveLayerRight('movingGhostR');"
　--------------------------------------------------------------------------------------

以下代码加到<head>…</head>中

以下代码加到<body>…</body>中

var layerRef="null",layerStyleRef="null",styleSwitch="null";

var rightStopPoint="null";

var currRight=-800;

function init(){

if (navigator.appName == "Netscape") {

layerStyleRef="layer.";

layerRef="document.layers";

styleSwitch="";

rightStopPoint=50;

}else{