img图片的mouseon 和mouseout产生效果的script调用

本文介绍了一种使用JavaScript实现的图片切换效果,通过定义多个图片数组并利用函数控制图片的切换,适用于网站导航栏图标展示。该方法简单易懂,适用于前端开发者。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 <script language="javascript">
var img_idx=0;
var img_list=new Array("images/xiangshan1.gif","images/xiangshan1_1.gif");
function next_img(){
img_idx++;
img_idx%=2;
return img_list[img_idx];
}
</script>

<script language="javascript">
var img_idxqiyexinwen=0;
var img_listqiyexinwen=new Array("images/xiangshan2.gif","images/xiangshan2_1.gif");
function next_imgqiyexinwen(){
img_idxqiyexinwen++;
img_idxqiyexinwen%=2;
return img_listqiyexinwen[img_idxqiyexinwen];
}
</script>

<script language="javascript">
var img_idxqiyegonggao=0;
var img_listqiyegonggao=new Array("images/xiangshan3.gif","images/xiangshan3_1.gif");
function next_imgqiyegonggao(){
img_idxqiyegonggao++;
img_idxqiyegonggao%=2;
return img_listqiyegonggao[img_idxqiyegonggao];
}
</script>

<script language="javascript">
var img_idxhangyexinwen=0;
var img_listhangyexinwen=new Array("images/xiangshan4.gif","images/xiangshan4_1.gif");
function next_imghangyexinwen(){
img_idxhangyexinwen++;
img_idxhangyexinwen%=2;
return img_listhangyexinwen[img_idxhangyexinwen];
}
</script>

<script language="javascript">
var img_idxzhengcefagui=0;
var img_listzhengcefagui=new Array("images/xiangshan5.gif","images/xiangshan5_1.gif");
function next_imgzhengcefagui(){
img_idxzhengcefagui++;
img_idxzhengcefagui%=2;
return img_listzhengcefagui[img_idxzhengcefagui];
}
</script>

<script language="javascript">
var img_idxwuliuzhishi=0;
var img_listwuliuzhishi=new Array("images/xiangshan6.gif","images/xiangshan6_1.gif");
function next_imgwuliuzhishi(){
img_idxwuliuzhishi++;
img_idxwuliuzhishi%=2;
return img_listwuliuzhishi[img_idxwuliuzhishi];
}
</script>

<script language="javascript">
var img_idxfuwukehu=0;
var img_listfuwukehu=new Array("images/xiangshan7.gif","images/xiangshan7_1.gif");
function next_imgfuwukehu(){
img_idxfuwukehu++;
img_idxfuwukehu%=2;
return img_listfuwukehu[img_idxfuwukehu];
}
</script>

<script language="javascript">
var img_idxkehuxinxi=0;
var img_listkehuxinxi=new Array("images/xiangshan8.gif","images/xiangshan8_1.gif");
function next_imgkehuxinxi(){
img_idxkehuxinxi++;
img_idxkehuxinxi%=2;
return img_listkehuxinxi[img_idxkehuxinxi];
}
</script>

<script language="javascript">
var img_idxxinxiguanli=0;
var img_listxinxiguanli=new Array("images/xiangshan9.gif","images/xiangshan9_1.gif");
function next_imgxinxiguanli(){
img_idxxinxiguanli++;
img_idxxinxiguanli%=2;
return img_listxinxiguanli[img_idxxinxiguanli];
}
</script>

<table  cellpadding="0" cellspacing="0">
                        <tr>
                            <td >
                                <asp:Image ID="Image14" runat="server" Width="32px" ImageUrl="~/images/index_bg.gif" Height="31px"/>
                            </td>
                            <td>
                                <a href="Default.aspx"><asp:Image ID="ea" runat="server" ImageUrl="~/images/xiangshan1.gif" onmouseover="this.src=next_img()" onmouseout="this.src=next_img()" /></a>
                            </td>
                           
                            <td>
                                <a href="more.aspx?id=3"><asp:Image ID="Image8" runat="server" ImageUrl="~/images/xiangshan2.gif" onmouseover="this.src=next_imgqiyexinwen()" onmouseout="this.src=next_imgqiyexinwen()"/></a>
                            </td>
                            <td>
                                <a href="more.aspx?id=2"><asp:Image ID="Image15" runat="server" ImageUrl="~/images/xiangshan3.gif" onmouseover="this.src=next_imgqiyegonggao()" onmouseout="this.src=next_imgqiyegonggao()"/></a>
                            </td>
                            <td>
                                <a href="more.aspx?id=5"><asp:Image ID="Image9" runat="server" ImageUrl="~/images/xiangshan4.gif" onmouseover="this.src=next_imghangyexinwen()" onmouseout="this.src=next_imghangyexinwen()" /></a>
                            </td>
                            <td>
                                <a href="more.aspx?id=7"><asp:Image ID="Image10" runat="server" ImageUrl="~/images/xiangshan5.gif" onmouseover="this.src=next_imgzhengcefagui()" onmouseout="this.src=next_imgzhengcefagui()"/></a>
                            </td>
                            <td>
                                <a href="more.aspx?id=6"><asp:Image ID="Image11" runat="server" ImageUrl="~/images/xiangshan6.gif" onmouseover="this.src=next_imgwuliuzhishi()" onmouseout="this.src=next_imgwuliuzhishi()"/></a>
                            </td>
                            <td>
                                <a href="more.aspx?id=4"><asp:Image ID="i7" runat="server" ImageUrl="~/images/xiangshan7.gif" onmouseover="this.src=next_imgfuwukehu()" onmouseout="this.src=next_imgfuwukehu()"/></a>
                            </td>
                            <td>
                                <a href="kehulogin.aspx?type=kehu"><asp:Image ID="Image12" runat="server" ImageUrl="~/images/xiangshan8.gif" onmouseover="this.src=next_imgkehuxinxi()" onmouseout="this.src=next_imgkehuxinxi()"/></a>
                            </td>
                            <td>
                                <a href="kehulogin.aspx?type=huoyun"><asp:Image ID="Image13" runat="server" ImageUrl="~/images/xiangshan9.gif" onmouseover="this.src=next_imgxinxiguanli()" onmouseout="this.src=next_imgxinxiguanli()"/></a>
                            </td>
                            <td style=" background-repeat:repeat-x">
                                <asp:Image ID="Image16" runat="server" ImageUrl="~/images/index_bg.gif" Width="32px" Height="31px" />
                            </td>
                        </tr>
                    </table>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值