鼠标划过广告自动切换JQUERY

$(function () {
    var $imgrolls = $("#jnImageroll div a");
    $imgrolls.css("opacity", "0.7");
    var len = $imgrolls.length;
    var index = 0;
    var adTimer = null;
    $imgrolls.mouseover(function () {
        index = $imgrolls.index(this);
        showImage(index);
    }).eq(0).mouseover();

//滑入 停止动画，滑出开始动画
    $('#jnImageroll').hover(function () {
        if (adTimer) {
            clearInterval(adTimer);
        }
    }, function () {
        adTimer = setInterval(function () {
            showImage(index);
            index++;
            if (index == len) {
                index = 0;
            }
        }, 5000);
    }).trigger("mouseleave");//进入页面开始自动触发hover方法

});

//显示不同幻灯片

function showImage(index) {
    var $rollobj = $("#jnImageroll");
    var $rolllist = $rollobj.find("div a");
    var newhref = $rolllist.eq(index).attr("href");
    $("#JS_imgWrap").attr("href", newhref).find("img").eq(index).stop(true, true).fadeIn().siblings().fadeOut();
    $rolllist.removeClass("chos").css("opacity", "0.7").eq(index).addClass("chos").css("opacity", "1");

}

//HTML页面

  <div id="jnImageroll">
                <a href="#nogo" id="JS_imgWrap">
                    
                    <img src="../images/ads/1.gif" alt="xxxxx"/>
                    <img src="../images/ads/2.gif" alt="xxxxx"/>
                    <img src="../images/ads/3.gif" alt="xxxxx"/>
                    <img src="../images/ads/4.gif" alt="xxxxx"/>
                    <img src="../images/ads/5.gif" alt="xxxxx"/>
                   
                </a>
                <div>
                    
                    <a href="###1"><em>相约情人节</em></a>
                    <a href="###2"><em>相约情人节</em></a>
                    <a href="###3"><em>相约情人节</em></a>
                    <a href="###4"><em>相约情人节</em></a>
                    <a href="###5" class="last"><em>相约情人节</em></a>
                </div>
            
            </div>

//css

#jnImageroll
{
        float:left;
        height:320px;
        margin:0 11px 0 0;
        overflow:hidden;
        position:relative;
        width:550px;
    }


#jnImageroll img
{
        position:absolute;
        left:0;
        top:0;
    }
#jnImageroll div
{
        bottom:0;
        overflow:hidden;
        position:absolute;
        float:left;
    }
#jnImageroll div a
{
        background-color:#444444;
        color:#ffffff;
        display:inline-block;
        float:left;
        height:32px;
        margin-right:1px;
        overflow:hidden;
        padding:5px 15px;
        text-align:center;
        width:79px;
        
    }
#jnImageroll div a:hover
{
        text-decoration:none;
       
    }
#jnImageroll div a em
{
        cursor:pointer;
        display:block;
        height:16px;
        overflow:hidden;
        width:79px;
    }
#jnImageroll .last
{
        margin:0;
        width:80px;
    }
#jnImageroll a.chos
{       
        background:#37a7d7;
        color:#dddddd;
    }