一个关于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是我自己写的

...全文
97 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

87,917

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧