jquery脚本的图片切换效果

<script src="images/jquery-1.4.2.min.js" language="javascript"></script>
<script language="javascript">
$(function () {
        $.each($(".ms li"), function (i, li) 
{ 
    $(this).mouseover(function () 
{
                $("#img"+0).attr("src","images/li"+0+"_off.jpg");       
                $("#img"+1).attr("src","images/li"+1+"_off.jpg");
                $("#img"+2).attr("src","images/li"+2+"_off.jpg");
    $("#img"+3).attr("src","images/li"+3+"_off.jpg");
    $("#img"+4).attr("src","images/li"+4+"_off.jpg");
    $("#img"+5).attr("src","images/li"+5+"_off.jpg");
    $("#img"+6).attr("src","images/li"+6+"_off.jpg");
    $("#img"+7).attr("src","images/li"+7+"_off.jpg");
    $("#img"+8).attr("src","images/li"+8+"_off.jpg");
     $("#div1").attr("src","images/ad"+i+".jpg");      $("#img"+i).attr("src","images/li"+i+"_on.jpg");
               var divList = $("#div1");             
                });        });
});
</script>

 

<div class="center">
<li class="mar"><img src="images/li0_on.jpg" width="100" height="200" id="img0"></li>
<li class="mar"><img src="images/li1_off.jpg" width="100" height="200" id="img1"></li>
<li class="mar"><img src="images/li2_off.jpg" width="100" height="200" id="img2"></li>
<li class="mar"><img src="images/li3_off.jpg" width="100" height="200" id="img3"></li>
<li class="mar"><img src="images/li4_off.jpg" width="100" height="200" id="img4"></li>
<li class="mar"><img src="images/li5_off.jpg" width="100" height="200" id="img5"></li>
<li class="mar"><img src="images/li6_off.jpg" width="100" height="200" id="img6"></li>
<li class="mar"><img src="images/li7_off.jpg" width="100" height="200" id="img7"></li>
<li><img src="images/li8_off.jpg" width="100" height="200" id="img8"></li>
</div>
<div class="center"><img src="images/ad0.jpg" width="900" height="400" id="div1"></div>

 加入CSS样式

.li1on{background:url(images/li1_on.jpg) no-repeat;}
.li1off{background:url(images/li1_off.jpg) no-repeat;}
.li2on{background:url(images/li2_on.jpg) no-repeat;}
.li2off{background:url(images/li2_off.jpg) no-repeat;}
.li3on{background:url(images/li3_on.jpg) no-repeat;}
.li3off{background:url(images/li3_off.jpg) no-repeat;}
.li4on{background:url(images/li4_on.jpg) no-repeat;}
.li4off{background:url(images/li4_off.jpg) no-repeat;}
.li5on{background:url(images/li5_on.jpg) no-repeat;}
.li5off{background:url(images/li5_off.jpg) no-repeat;}
.li6on{background:url(images/li6_on.jpg) no-repeat;}
.li6off{background:url(images/li6_off.jpg) no-repeat;}
.li7on{background:url(images/li7_on.jpg) no-repeat;}
.li7off{background:url(images/li7_off.jpg) no-repeat;}
.li8on{background:url(images/li8_on.jpg) no-repeat;}
.li8off{background:url(images/li8_off.jpg) no-repeat;}
.li9on{background:url(images/li9_on.jpg) no-repeat;}
.li9off{background:url(images/li9_off.jpg) no-repeat;}