想实现一个图片轮换的效果,图片下面有两个div,点击分别可以切换到上一张,下一张图片,不点击的时候,图片定时轮换,现在我改动了,点击后,图片切换个不停,对js实在是不会,把源码贴出来,希望能有高手帮我解决,谢谢了。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<style type="text/css">
img {border:0px;}
#pre
{
background-image:url(images/pre.jpg);
background-repeat:no-repeat;
float:right;
width:25px;
height:22px;
cursor:pointer;
}
#next
{
background-image:url(images/next.jpg);
background-repeat:no-repeat;
float:right;
width:26px;
height:22px;
cursor:pointer;
}
</style>
<script>
var NowFrame = 1;
var MaxFrame = 3;
var bStart = 0;
function fnToggle()
{
var next = NowFrame + 1;
if(next == MaxFrame+1)
{
NowFrame = MaxFrame;
next = 1;
}
if(bStart == 0)
{
bStart = 1;
setTimeout('fnToggle()', 1000);
return;
}
else
{
oTransContainer.filters[0].Apply();
document.images['oDIV'+next].style.display = "";
document.images['oDIV' + NowFrame].style.display = "none";
oTransContainer.filters[0].Play(duration=2);
if(NowFrame == MaxFrame)
{
NowFrame = 1;
}
else
{
NowFrame++;
}
}
setTimeout('fnToggle()', 6000);
}
fnToggle();
</script>
</head><body>
<div id="test" style="background-color:Black;width:100%; height:150px;">
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id=oTransContainer style="FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0, motion='forward'); WIDTH: 165px; HEIGHT: 103px">
<a href="#" target="_blank"><img class=pic id=oDIV1 src="images/01.jpg" width=788 height=150>
</a>
<a href="#" target="_blank"><img class=pic id=oDIV2 src="images/02.jpg" width=788 height=150 style="DISPLAY: none;"></a>
<a href="#" target="_blank"><img class=pic id=oDIV3 src="images/03.jpg" width=788 height=150 style="DISPLAY: none;"></a>
</div>
</td>
</tr>
</table></div>
<div style="margin:0px auto; width:788px; height:22px;">
<div id="next"></div>
<div id="pre"></div>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<style type="text/css">
img {border:0px;}
#pre
{
background-image:url(images/pre.jpg);
background-repeat:no-repeat;
float:right;
width:25px;
height:22px;
cursor:pointer;
}
#next
{
background-image:url(images/next.jpg);
background-repeat:no-repeat;
float:right;
width:26px;
height:22px;
cursor:pointer;
}
</style>
<script>
var NowFrame = 1;
var MaxFrame = 3;
var bStart = 0;
function fnToggle()
{
var next = NowFrame + 1;
if(next == MaxFrame+1)
{
NowFrame = MaxFrame;
next = 1;
}
if(bStart == 0)
{
bStart = 1;
setTimeout('fnToggle()', 1000);
return;
}
else
{
oTransContainer.filters[0].Apply();
document.images['oDIV'+next].style.display = "";
document.images['oDIV' + NowFrame].style.display = "none";
oTransContainer.filters[0].Play(duration=2);
if(NowFrame == MaxFrame)
{
NowFrame = 1;
}
else
{
NowFrame++;
}
}
setTimeout('fnToggle()', 6000);
}
fnToggle();
</script>
</head><body>
<div id="test" style="background-color:Black;width:100%; height:150px;">
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id=oTransContainer style="FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0, motion='forward'); WIDTH: 165px; HEIGHT: 103px">
<a href="#" target="_blank"><img class=pic id=oDIV1 src="images/01.jpg" width=788 height=150>
</a>
<a href="#" target="_blank"><img class=pic id=oDIV2 src="images/02.jpg" width=788 height=150 style="DISPLAY: none;"></a>
<a href="#" target="_blank"><img class=pic id=oDIV3 src="images/03.jpg" width=788 height=150 style="DISPLAY: none;"></a>
</div>
</td>
</tr>
</table></div>
<div style="margin:0px auto; width:788px; height:22px;">
<div id="next"></div>
<div id="pre"></div>
</div>
</body>
</html>
function changenext()
{
clearTimeout('fnToggle()');
NowFrame=NowFrame+1;
if(NowFrame==3)
{
NowFrame=1;
}
fnToggle();
}就是在FnToggle()方法下面加了个changenext()的函数,用于下一张点击的。但是不行呀。。
clearTimeout(iTime);这样才行吧
除了楼上说的把clearTimeout('fnToggle()');改正之外,要把changenext()里的fnToggle()改为setTimeout,这样可以保证你在点击next切换到下一张图片之后不会立即切换到下一张,而是正常的等待6妙后切换,如下:function changenext()
{
clearTimeout(iTime);
NowFrame=NowFrame+1;
if(NowFrame==3)
{
NowFrame=1;
}
iTime = setTimeout("fnToggle()",6000);
//iTime要设为全局变量
}
{
clearTimeout(iTime);
}
iTime = setTimeout("fnToggle()",4000);至于changeNext函数简单的写成这样就可以了function changeNext()
{
fnToggle();
}试一下,应该是有效的。