【锋利的JQuery-学习笔记】广告栏

效果图：

html：

                <div id="jnImageroll">
                    <a href="#nogo" id="JS_imgWrap">
                        <img src="data:images/ads/1.jpg" alt="相约情人节"/>
                        <img src="data:images/ads/2.jpg" alt="新款上线"/>
                        <img src="data:images/ads/3.jpg" alt="愤怒小鸟特卖"/>
                        <img src="data:images/ads/4.jpg" alt="男鞋促销第一波"/>
                        <img src="data:images/ads/5.jpg" alt="春季新品发布"/>
                    </a>
                    <div>
                        <a href="###1"><em>相约情人节</em><em>全场119元起</em></a>
                        <a href="###2"><em>新款上线</em><em>全场357元起</em></a>
                        <a href="###3"><em>愤怒小鸟特卖</em><em>全场89元</em></a>
                        <a href="###4"><em>男鞋促销第一波</em><em>全场3.1折起</em></a>
                        <a href="###5" class="last"><em>春季新品发布</em><em>全场4.1折起</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:;
    top:;
}
#jnImageroll div {
    bottom:;
    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:;
    width: 80px;
}
#jnImageroll a.chos {
    background: url("../images/adindex.gif") no-repeat center 39px #37A7D7;
    color: #FFFFFF;
}

../images/adindex.gif"是：白色三角形：

js：

$(function () {
    var $imgrolls = $("#jnImageroll div a");
    var $len = $imgrolls.lenth;
    var index = 0;
    var adTimer = null;

    $imgrolls.css("opacity", 0.7);
    $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 ($len == index) {
                index = 0;
            }
        }, 3000);
    }).trigger("mouseleave");
});

//显示不同的幻灯片
function showImage(index) {
    var $rollobj = $("#jnImageroll");
    var $imgWrap = $("#JS_imgWrap");

    var $rollList = $rollobj.find("div a");
    var newhref = $rollList.eq(index).attr("href");

    $imgWrap.attr("href", newhref);
    $imgWrap.find("img").eq(index).stop(true, true)
    .fadeIn()
    .siblings().fadeOut();

    $rollList.removeClass("chos").css("opacity", 0.7)
        .eq(index).addClass("chos").css("opacity", 1);
}

其他资源：

http://www.oschina.net/code/snippet_206691_11515