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

      ,这个送给你!

  • 相关阅读:
    122. Best Time to Buy and Sell Stock II
    121. Best Time to Buy and Sell Stock
    72. Edit Distance
    583. Delete Operation for Two Strings
    582. Kill Process
    indexDB基本用法
    浏览器的渲染原理
    js实现txt/excel文件下载
    git 常用命令
    nginx进入 配置目录时
  • 原文地址:https://www.cnblogs.com/di305449473/p/1747970.html
Copyright © 2020-2023  润新知