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>

      ,这个送给你!

  • 相关阅读:
    .NET Core 下使用 Exceptionless 记录日志
    .NET Core 下使用 Kafka
    .NET Core 下使用 RabbitMQ
    .NET Core 下使用 ElasticSearch
    .NET Core 下使用 gRPC
    【手摸手,带你搭建前后端分离商城系统】02 VUE-CLI 脚手架生成基本项目,axios配置请求、解决跨域问题
    【手摸手,带你搭建前后端分离商城系统】01 搭建基本代码框架、生成一个基本API
    【开源】Springboot API 一键生成器
    力扣1. 两数之和
    常用代码优化手段
  • 原文地址:https://www.cnblogs.com/di305449473/p/1747970.html
Copyright © 2011-2022 走看看