lishaozhang

LISHAOZHANG 2009-04-24 01:26:51

image的多张图片如何切换

...全文

112 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

LISHAOZHANG 2009-04-24

打赏
举报

晕不是刚刚注册的吗？
还不是没几分啊？

zpphao 2009-04-24

打赏
举报

要用到JS的;
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);
}
}

function toggleTo(img)
{
bStop=1;
if(img==1)
{
document.images['oDIV1'].style.display = "";
document.images['oDIV2'].style.display = "none";
document.images['oDIV3'].style.display = "none";
document.images['oDIV4'].style.display = "none";
}
else if(img==2)
{
document.images['oDIV2'].style.display = "";
document.images['oDIV1'].style.display = "none";
document.images['oDIV3'].style.display = "none";
document.images['oDIV4'].style.display = "none";
}
else if(img==3)
{
document.images['oDIV3'].style.display = "";
document.images['oDIV1'].style.display = "none";
document.images['oDIV2'].style.display = "none";
document.images['oDIV4'].style.display = "none";
}
else if(img==4)
{
document.images['oDIV4'].style.display = "";
document.images['oDIV1'].style.display = "none";
document.images['oDIV2'].style.display = "none";
document.images['oDIV3'].style.display = "none";
}

}

Html页面
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<SCRIPT src="js/article.js"></SCRIPT>
<link href="css/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="312" border="0" align="center" cellpadding="0" cellspacing="0" class="solidbox">
<tr>
<td width="312" height="312" align="center"><TABLE border=0 align="center" cellPadding=0 cellSpacing=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.webkkk.com/sygj/ggdm.htm"
target=_blank><IMG id=oDIV1
style="DISPLAY: yes;"
height=300 src="images/01.jpg"
width=300 border=0></A><A
href="http://www.webkkk.com/sygj/ggdm.htm"
target=_blank><IMG id=oDIV2
style="DISPLAY: none;"
height=300 src="images/02.jpg"
width=300 border=0></A><A
href="http://www.webkkk.com/sygj/ggdm.htm"
target=_blank><IMG id=oDIV3
style="DISPLAY: none;"
height=300 src="images/03.jpg"
width=300 border=0></A><A
href="http://www.webkkk.com/sygj/ggdm.htm"
target=_blank><IMG id=oDIV4
style="DISPLAY: none;"
height=300 src="images/04.jpg"
width=300 border=0></A></DIV>
</TD>
</TR>
</TBODY>
</TABLE></td>
</tr>
<tr>
<td height="22" align="right" valign="top"><script>var MaxImg = 4; fnToggle();</script>
<TABLE cellSpacing=1 cellPadding=0 width=110
border=0>
<TBODY>
<TR>
<TD width=26><A href="javascript:toggleTo(1)"><IMG height=15
src="images/s_1.gif" width=17
border=0></A></TD>
<TD width=26><A href="javascript:toggleTo(2)"><IMG height=15
src="images/s_2.gif" width=17
border=0></A></TD>
<TD width=26><A href="javascript:toggleTo(3)"><IMG height=15
src="images/s_3.gif" width=17
border=0></A></TD>
<TD width=27><A href="javascript:toggleTo(4)"><IMG height=15
src="images/s_4.gif" width=17
border=0></A></TD>
</TR>
</TBODY>
</TABLE></td>
</tr>
</table>
</body>
</html>