码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-07-22 23:00:13      阅读:431      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   java   color   os   

效果图:

mamicode.com,码迷

 

html:

mamicode.com,码迷
                <div id="jnImageroll">
                    <a href="#nogo" id="JS_imgWrap">
                        <img src="images/ads/1.jpg" alt="相约情人节"/>
                        <img src="images/ads/2.jpg" alt="新款上线"/>
                        <img src="images/ads/3.jpg" alt="愤怒小鸟特卖"/>
                        <img src="images/ads/4.jpg" alt="男鞋促销第一波"/>
                        <img src="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>
mamicode.com,码迷

 

css :

mamicode.com,码迷
/* 大屏广告 */
#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: url("../images/adindex.gif") no-repeat center 39px #37A7D7;
    color: #FFFFFF;
}
mamicode.com,码迷
../images/adindex.gif"是:白色三角形:mamicode.com,码迷

 js:

mamicode.com,码迷
$(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);
}
mamicode.com,码迷

 

【锋利的JQuery-学习笔记】广告栏,码迷,mamicode.com

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

标签:style   blog   http   java   color   os   

原文地址:http://www.cnblogs.com/easy5weikai/p/3702990.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!