zoukankan      html  css  js  c++  java
  • 【锋利的JQuery-学习笔记】广告栏

    效果图:

    html:

                    <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>

    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: 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

  • 相关阅读:
    IIS的各种身份验证详细测试
    HTTP Error 401.3 Unauthorized Error While creating IIS 7.0 web site on Windows 7
    C/S and B/S
    WCF ContractFilter mismatch at the EndpointDispatcher exception
    Configure WCF
    Inheritance VS Composition
    Unhandled Error in Silverlight Application, code 2103 when changing the namespace
    Java RMI VS TCP Socket
    Principles Of Object Oriented Design
    Socket处理发送和接收数据包,一个小实例:
  • 原文地址:https://www.cnblogs.com/easy5weikai/p/3702990.html
Copyright © 2011-2022 走看看