zoukankan      html  css  js  c++  java
  • jquery 手写广告轮换效果

    代码
    //广告轮换效果
    var index = 1;
    var speed 
    = 4000;
    var autoMove 
    = null;
    Move_Interval();
    function Move_Interval()
    {
        autoMove 
    = setInterval(function(){
            index
    ++;
            
    if (index > 4)
            {
                index 
    = 1;
            }
            Move();
        }, speed);
    }
    function Move()
    {
        $(
    "#img_banner").attr("src","/img_index/v3.0banner"+index+".jpg").hide().fadeIn();
        
    for(var j=1;j<5;j++){
            var text 
    = $("#li_banner"+j).children("a").text()+$("#li_banner"+j).children("span").text();
            
    if(index==j)
                $(
    "#li_banner"+j).html("<span class='on'>"+text+"</span>");
            
    else
                $(
    "#li_banner"+j).html("<a href='javascript:void(0)'>"+text+"</a>");
        }
    }

    //鼠标放上,放下效果
    $("[id^=li_banner]").each(function(i,n){
        $(
    this).hover(function(){
            index
    =i+1;
            Move();
            window.clearInterval(autoMove);
        },function(){
            Move_Interval();
        });
    });
    代码
    <ul>
                    
    <li id="li_banner1"><span class="on">百货谷招商热潮!</span></li>
                    
    <li style="background: url(img_index/v3.0bannerxian.jpg) no-repeat center center;
                         2px; height: 32px; padding: 0 3px;"></li>
                    <li id="li_banner2"><a href="javascript:void(0)">《赢在中国》36强</a></li>
                    
    <li style="background: url(img_index/v3.0bannerxian.jpg) no-repeat center center;
                         2px; height: 32px; padding: 0 3px;"></li>
                    <li id="li_banner3"><a href="javascript:void(0)">独享财富梦想</a></li>
                    
    <li style="background: url(img_index/v3.0bannerxian.jpg) no-repeat center center;
                         2px; height: 32px; padding: 0 3px;"></li>
                    <li id="li_banner4"><a href="javascript:void(0)">《购物指南》免费送</a></li>
                
    </ul>

      ,这个送给你!

  • 相关阅读:
    ZOJ 2671 Cryptography(线段树+求区间矩阵乘积)
    HDU 4662 MU Puzzle(找规律)
    Codeforces 392 C Unfair Poll(模拟)
    UVA 11134 Fabled Rooks(传说中的车)(贪心)
    UVA 11212 Editing a Book(IDA*算法+状态空间搜索)
    用户的昵称【哈希】
    【洛谷P2375】动物园【KMP】
    【洛谷P2375】动物园【KMP】
    【洛谷P2375】动物园【KMP】
    【洛谷P1886】滑动窗口【单调队列】
  • 原文地址:https://www.cnblogs.com/di305449473/p/1747970.html
Copyright © 2011-2022 走看看