一个关于JS图片切换的小问题
Ginie 2009-11-16 09:47:49 就想实现个新闻图片切换的效果,鼠标点上去图片就换一下,因为是哥JS盲,所以要请大家帮下忙了,下面是我在网上搜的一个代码,但它实现的是5哥图片的,我要改成4个的,怎么改呀。
<script type="text/javascript">
function filterImages()
{
// 定义要放影的图片图径的数组
var imgSrcArr = ["images/a.jpg","images/b.jpg","images/c.jpg","images/d.jpg","images/e.jpg"];
var oImg = document.getElementById("oImg");
var iCurIndex = -1;
if( arguments.length == 0 )
{
// 获得当前是第几张图片
iCurIndex = parseInt( oImg.getAttribute("curPicNum") ) ;
// 获得总图片数量,必须小于或等于图片路径数组的长度
var iTotalPicNum = parseInt( oImg.getAttribute("totalPicNum") ) ;
iCurIndex++; // 放影下一张图片,若到了最后一张,则放影第一经
if ( iCurIndex > iTotalPicNum )
{
iCurIndex = 1;
}
}else
{
iCurIndex = arguments[0] ;
}
下面是HTMI代码
我弄上去的
<div id="Layer8" style="position:absolute"><img id="oImg" curpicnum="1" totalpicnum="4"
src="images/focus/11.jpg" style="filter:RevealTrans ( duration = 2,transition=12 ); clear:both;"
width="251" height="192" /></div>
<div id="Layer9">
<table width="253" height="56" border="1">
<tr>
<td><img src="images/focus/11.jpg" onMouseOver="smallImgOver(1)" onMouseOut="smallImgOut()"
width="56" height="42" alt=""/></td>
<td><img src="images/focus/22.jpg" onMouseOver="smallImgOver(1)" onMouseOut="smallImgOut()"
width="56" height="42" alt=""/></td>
<td><img src="images/focus/33.jpg" onMouseOver="smallImgOver(1)" onMouseOut="smallImgOut()"
width="56" height="42" alt=""/></td>
<td><img src="images/focus/44.jpg" onMouseOver="smallImgOver(1)" onMouseOut="smallImgOut()"
width="56" height="42" alt=""/></td>
</tr>
</table>
</div
oImg.filters[0].Apply();
oImg.src = imgSrcArr[ iCurIndex - 1 ];
oImg.setAttribute("curPicNum",iCurIndex);
iTrans = Math.floor ( Math.random( ) * (12+1 ) ) ;// 动态变换的方式有12种
oImg.filters[0].transition = iTrans ;
oImg.filters[0].Play(1);
if( arguments.length == 0 )
{
iTimerId = window.setTimeout(filterImages,4000);
}
}
var iTimerId = null;
window.onload = function ()
{
iTimerId = window.setTimeout(filterImages,4000);
}
function smallImgOver(index)
{
filterImages(index) ; // 取消时间间隔事件
window.clearTimeout( iTimerId ) ;
}
function smallImgOut()
{
// 恢复时间间隔事件
iTimerId = window.setTimeout(filterImages,4000);
}
图片路劲我自己的改了,上面的是在网上抄的代码,但在Dreamweaver上我也改了,这里只是把别人的原版复制给大家看,下面的HTML是我自己写的