网页制作经典代码系列—幻灯片广告样式1 - 启步网（7ibu.com）网络、IT(挨踢)职业游民学习娱乐之家.

网页制作经典代码系列—幻灯片广告样式1

作者： sunhy 阅读：来源：启步网时间：2007-2-7 14:53:16

字体：小中大

这一系列是由sunhy收集整理，经过多次调试后！适用于各种网站使用的网页制作过程中经常使用的经典代码。

这一篇，我们讲解：幻灯片广告样式1 的制作及实现方法。

首先定义样式，这是运行代码框后我们看到的效果外观，样式代码如下：

TD {
FONT-SIZE: 12px
}
.solidbox {
BORDER-RIGHT: #d7d7d7 1px solid; BORDER-TOP: #d7d7d7 1px solid; BORDER-LEFT: #d7d7d7 1px solid; BORDER-BOTTOM: #d7d7d7 1px solid
}

其次，编写javascript主脚本：

<SCRIPT>
var NowImg = 1;
var bStart = 0;
var bStop =0;

function fnToggle()
{
var next = NowImg + 1;

if(next == MaxImg+1)
{
NowImg = MaxImg;
next = 1;
}
if(bStop!=1)
{

  if(bStart == 0)
  {
   bStart = 1;
   setTimeout('fnToggle()', 4000);
   return;
  }
  else
  {
   oTransContainer.filters[0].Apply();

document.images['oDIV'+next].style.display = "";
document.images['oDIV'+NowImg].style.display = "none";

oTransContainer.filters[0].Play(duration=2);

   if(NowImg == MaxImg)
    NowImg = 1;
   else
    NowImg++;
  }
  setTimeout('fnToggle()', 4000);
}
}

}
</SCRIPT>

全部代码如下，运行查看效果，你可以先修改代码再运行：

<DIV>    
这一系列是由sunhy收集整理，经过多次调试后！适用于各种网站使用的网页制作过程中经常使用的经典代码。</DIV>
<DIV>    更多资料请查看：<A href="/developer/web/2007/0207/745.htm"><FONT 
color=#cc6600><STRONG>网页制作经典代码系列专题</STRONG></FONT></A></DIV>
<DIV>    这一篇，我们讲解：幻灯片广告样式1 的制作及实现方法。</DIV>
<style>
TD {
	FONT-SIZE: 12px
}
.solidbox {
	BORDER-RIGHT: #d7d7d7 1px solid; BORDER-TOP: #d7d7d7 1px solid; BORDER-LEFT: #d7d7d7 1px solid; BORDER-BOTTOM:

#d7d7d7 1px solid
}
</style>

<SCRIPT>
var NowImg = 1;
var bStart = 0;
var bStop =0;

function fnToggle() 
{
	var next = NowImg + 1;

if(next == MaxImg+1) 
	{
		NowImg = MaxImg;
		next = 1;
	}
	if(bStop!=1)
	{

if(bStart == 0)
		{
			bStart = 1;		
			setTimeout('fnToggle()', 4000);
			return;
		}
		else
		{
			oTransContainer.filters[0].Apply();

document.images['oDIV'+next].style.display = "";
			document.images['oDIV'+NowImg].style.display = "none";

oTransContainer.filters[0].Play(duration=2);

if(NowImg == MaxImg) 
				NowImg = 1;
			else
				NowImg++;
		}
		setTimeout('fnToggle()', 4000);
	}
}

}
</SCRIPT>

<TABLE class=solidbox cellSpacing=0 cellPadding=0 width=312 align=center 
border=0>
  <TBODY>
  <TR>
    <TD align=middle width=312 height=312>
      <TABLE cellSpacing=0 cellPadding=0 align=center border=0>
        <TBODY>
        <TR>
          <TD>
            <DIV id=oTransContainer 
            style="FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0, motion='forward'); WIDTH:

220px; HEIGHT: 194px"><A 
            href="http://www.7ibu.com/" target=_blank><IMG id=oDIV1 
            height=300 src="/web7ibu/UpLoadFiles/wangye/200702/01.jpg" width=300 border=0></A><A 
            href="http://www.7ibu.com/" target=_blank><IMG id=oDIV2 
            style="DISPLAY: none" height=300 src="/web7ibu/UpLoadFiles/wangye/200702/02.jpg" 
            width=300 border=0></A><A href="http://www.7ibu.com/" 
            target=_blank><IMG id=oDIV3 style="DISPLAY: none" height=300 
            src="/web7ibu/UpLoadFiles/wangye/200702/03.jpg" width=300 border=0></A><A 
            href="http://www.7ibu.com/" target=_blank><IMG id=oDIV4 
            style="DISPLAY: none" height=300 src="/web7ibu/UpLoadFiles/wangye/200702/04.jpg" 
            width=300 border=0></A></DIV></TD></TR></TBODY></TABLE></TD></TR>
  <TR>
    <TD vAlign=top align=right height=22>
      <SCRIPT>var MaxImg = 4; fnToggle();</SCRIPT>

责任编辑：一路狂奔

帐号：
密码：

Google提供的相关资源