帮忙修改一段JS代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jquery图片滑动效果Left</title>
<style type="text/css">
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53,sans-serif;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
#ad_box{width:775px; height:307px; overflow:hidden; position:relative; margin:0 auto;}
#ad_slider{ position:absolute; width:3875px;}
#ad_slider li{ font-size:0px; float:left; }
#ad_num{ position:absolute; right:5px; bottom:5px;}
#ad_num span{float:left;margin-right:10px;}

</style>
<script src="jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var len = $("#ad_num > span").length;
var index = 0;
$("#ad_num > span").mouseover(function(){
index = $("#ad_num > span").index(this);
showImg(index);
});
//鼠标滑入box区域停止动画，滑出开始动画
$("#ad_box").hover(function(){
if(MyTime){
clearInterval(MyTime);
}
},function(){
MyTime = setInterval(function(){
showImg(index);
index++;
if(index == len){index=0}
},2000);
});
//每隔两秒切换一张图片
var MyTime = setInterval(function(){
showImg(index);
index++;
if(index == len){index=0}
},2000);
});
//通过控制css left 的值来显示不同的图片
function showImg(i){
$("#ad_slider").stop(true,false).animate({left:-775*i},600);
 var imgsrc = "/images/";
         var arrary_x = [imgsrc + "baobaohover.gif", imgsrc + "jiatingshenghuohover.gif", imgsrc + "jiehunhover.gif", imgsrc + "ersunmantanghover.gif", imgsrc + "haizibyehover.gif"];
        var arrary_y = [imgsrc + "baobao.gif", imgsrc + "jiatingshenghuo.gif", imgsrc + "jiehun.gif", imgsrc + "ersunmantang.gif", imgsrc + "haizibye.gif"];
$("#ad_num > span>img").eq(i).addClass("ad_on").siblings().removeClass("ad_on");
$("#ad_num > span>img").eq(i).attr("src",arrary_x[i]).siblings("ad_on").attr("src",arrary_y[i]);
}
</script>
</head>
<body>
<div id="ad_box">
<ul id="ad_slider">
<li><img src="images/1.jpg" width="775" height="307" alt="1" /></li>
<li><img src="images/1.jpg" width="775" height="307" alt="1" /></li>
<li><img src="images/1.jpg" width="775" height="307" alt="1" /></li>
                <li><img src="images/1.jpg" width="775" height="307" alt="1" /></li>
<li><img src="images/1.jpg" width="775" height="307" alt="1" /></li>
</ul>
<div id="ad_num">
<span class="ad_on"><img src="images/baobaohover.gif" width="120" height="26" alt="" /></span>
<span><img src="images/jiatingshenghuo.gif" width="155" height="26" alt="" /></span>
<span><img src="images/jiehun.gif" width="115" height="26" alt="" /></span>
                <span><img src="images/ersunmantang.gif" width="160" height="26" alt="" /></span>
<span><img src="images/haizibye.gif" width="155" height="26" alt="" /></span>
</div>
</div>
</body>
</html>上面这段JS代码是实现图片广告效果，不过现在鼠标移上去或者自动换图片时不能实现想要的效果，想要的效果是鼠标移上去或者自动转换图片时，标题图片能变化，而没有经过的变成原来的样子。
请大虾帮忙修改一下！

解决方案 »

  1.   

    不好意思，看这个例子吧！
    http://www.oyrfnic.com/test/test.html
    这个是没有完成的，大家帮忙修改一下！
      

  2.   

    你这里都是"images/1.jpg"，换不同的图片试试<li><img src="images/1.jpg" width="775" height="307" alt="1" /></li>
    <li><img src="images/1.jpg" width="775" height="307" alt="1" /></li>
    <li><img src="images/1.jpg" width="775" height="307" alt="1" /></li>
    <li><img src="images/1.jpg" width="775" height="307" alt="1" /></li>
    <li><img src="images/1.jpg" width="775" height="307" alt="1" /></li>
      

  3.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>图片切换展示效果</title>
    <script type="text/javascript" src="common/jquery-1.2.6.min.js"></script>
    <link type="text/css" rel="stylesheet" href="common/common.css" />
    <style type="text/css">
    .scroll{width:408px;height:168px;overflow:hidden;position:relative;border:#ccc 1px solid;}
    .slider{position:absolute;}
    .slider img{width:408px;height:168px;display:block;}
    .num{position:absolute;right:5px;bottom:5px;}
    .num li{float:left;color:#FF7300;text-align:center;line-height:16px;width:16px;height:16px;font-family:Arial;font-size:12px;cursor:pointer;overflow:hidden;margin:3px 1px;border:1px solid #FF7300;background-color:#fff;}
    .num li.on{color:#fff;line-height:21px;width:21px;height:21px;font-size:16px;margin:0 1px;border:0;background-color:#FF7300;font-weight:bold;}
    </style>
    </head>
    <body>
    <script language="javascript" >
    $(function(){
         var len = $("#idNum > li").length;
    var index = 0;
    $("#idNum li").mouseover(function(){
       index =   $("#idNum li").index(this);
       showImg(index);
    }); 
    $('#idTransformView').hover(function(){
         if(MyTime){
         clearInterval(MyTime);
         }
    },function(){
         MyTime = setInterval(function(){
           showImg(index)
         index++;
         if(index==len){index=0;}
         } , 4000);
    });
    var MyTime = setInterval(function(){
       showImg(index)
       index++;
       if(index==len){index=0;}
    } , 4000);
    })
    function showImg(i){
       $("#idSlider").stop(true,false).animate({top : -168*i},800);
       $("#idNum li")
        .eq(i).addClass("on")
        .siblings().removeClass("on");
    }
    </script>
    <div class="scroll" id="idTransformView">
        <ul class="slider" id="idSlider">
            <li><img src="http://www.ouyea.com/Template/default/Images/ad/index0908_ad_top03.jpg"/></li>
            <li><img src="http://www.ouyea.com/Template/default/Images/activity/ad1.jpg"/></li>
            <li><img src="http://www.ouyea.com/UploadFile/Picture/2009-9-21/2009921170353571.jpg"/></li>
            <li><img src="http://www.ouyea.com/Template/default/Images/ad/index0908_ad_top03.jpg"/></li>
            <li><img src="http://www.ouyea.com/Template/default/Images/activity/ad1.jpg"/></li>
        </ul>
        <ul class="num" id="idNum">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    </body>
    </html>
    无码无真相，上段代码
      

  4.   

    <script language="javascript" type="text/javascript">     $(function() {
            var len = $("#ad_num > span>img").length;
            //alert(len);
            var index = 0;
            $("#ad_num > span>img").hover(function() {
                index = $("#ad_num > span>img").index(this);
                             $("#ad_num>span").each(function(i) {
                                 
                                 var imgsrc = "/skins/default/newimages/newweb/";
                                 var arrary_x = [imgsrc + "jiehunhover.gif", imgsrc + "baobaohover.gif", imgsrc + "jiatingshenghuohover.gif", imgsrc + "haizibyehover.gif", imgsrc + "ersunmantanghover.gif"];
                                 var arrary_y = [imgsrc + "jiehun.gif", imgsrc + "baobao.gif", imgsrc + "jiatingshenghuo.gif", imgsrc + "haizibye.gif", imgsrc + "ersunmantang.gif"];
                                 //$("#ad_num>span>img").eq(0).attr("src", arrary_x[0]);
                                 if (index == i) {
                                     //alert(index);
                                     $("#ad_slider").stop(true, false).animate({ left: -767 * i }, 773);
                                     $("#ad_num>span>img").eq(i).attr("src", arrary_x[i]);
                                 }
                                 else {
                                     $("#ad_num>span>img").eq(i).attr("src", arrary_y[i]);
                                 }                          });//             showImg(index);         });
            //鼠标滑入box区域停止动画，滑出开始动画
            $("#ad_box").hover(function() {
                if (MyTime) {
                    clearInterval(MyTime);
                }
            }, function() {
                MyTime = setInterval(function() {
                $("#ad_num>span").each(function(i) {                 var imgsrc = "/skins/default/newimages/newweb/";
                    var arrary_x = [imgsrc + "jiehunhover.gif", imgsrc + "baobaohover.gif", imgsrc + "jiatingshenghuohover.gif", imgsrc + "haizibyehover.gif", imgsrc + "ersunmantanghover.gif"];
                    var arrary_y = [imgsrc + "jiehun.gif", imgsrc + "baobao.gif", imgsrc + "jiatingshenghuo.gif", imgsrc + "haizibye.gif", imgsrc + "ersunmantang.gif"];
                    //$("#ad_num>span>img").eq(0).attr("src", arrary_x[0]);
                    if (index == i) {
                        //alert(index);
                        $("#ad_slider").stop(true, false).animate({ left: -767 * i }, 773);
                        $("#ad_num>span>img").eq(i).attr("src", arrary_x[i]);
                    }
                    else {
                        $("#ad_num>span>img").eq(i).attr("src", arrary_y[i]);
                    }             });
                    index++;
                    if (index == len) { index = 0 }
                }, 4000);
            });
            //每隔两秒切换一张图片
            var MyTime = setInterval(function() {
            $("#ad_num>span").each(function(i) {             var imgsrc = "/skins/default/newimages/newweb/";
                var arrary_x = [imgsrc + "jiehunhover.gif", imgsrc + "baobaohover.gif", imgsrc + "jiatingshenghuohover.gif", imgsrc + "haizibyehover.gif", imgsrc + "ersunmantanghover.gif"];
                var arrary_y = [imgsrc + "jiehun.gif", imgsrc + "baobao.gif", imgsrc + "jiatingshenghuo.gif", imgsrc + "haizibye.gif", imgsrc + "ersunmantang.gif"];
                //$("#ad_num>span>img").eq(0).attr("src", arrary_x[0]);
                if (index == i) {
                    //alert(index);
                    $("#ad_slider").stop(true, false).animate({ left: -767 * i }, 600);
                    $("#ad_num>span>img").eq(i).attr("src", arrary_x[i]);
                }
                else {
                    $("#ad_num>span>img").eq(i).attr("src", arrary_y[i]);
                }         });
                index++;
                if (index == len) { index = 0 }
            }, 4000);//         //通过控制css left 的值来显示不同的图片
    //         function showImg(i) {//             for (var j = 0; j < len; j++) {//                 var imgsrc = "/skins/default/newimages/newweb/";
    //                 var arrary_x = [imgsrc + "jiehunhover.gif", imgsrc + "baobaohover.gif", imgsrc + "jiatingshenghuohover.gif", imgsrc + "haizibyehover.gif", imgsrc + "ersunmantanghover.gif"];
    //                 var arrary_y = [imgsrc + "jiehun.gif", imgsrc + "baobao.gif", imgsrc + "jiatingshenghuo.gif", imgsrc + "haizibye.gif", imgsrc + "ersunmantang.gif"];
    //  
    //                     $("#ad_num>span>img").eq(i).attr("src", arrary_x[i]);
    //                        $("#ad_slider").stop(true, false).animate({ left: -773 * i }, 600);
    //                 //$("#ad_num > span>img").eq(i).addClass("ad_on").siblings().removeClass("ad_on");
    //             }
    //         }
        });
    </script>解决办法，虽然有点烦，但是成功了，假如各位觉得代码太臃肿，可以修改一下的！