热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

广告切换效果(缓动切换)

主要功能: 1,自动检测广告图片个数 生产广告序列 2,缓动切换,仿原版FLASH 效果 3,自动按照设置周期播放 4,鼠标划入停止自动播放
主要功能:

1,自动检测广告图片个数 生产广告序列
2,缓动切换,仿原版FLASH 效果
3,自动按照设置周期播放
4,鼠标划入停止自动播放 鼠标移走恢复自动播放
其中第一个功能扩展比较实用,这样就没有必要分别 更新图片 和 图片个数了。
应用了 jQuery 的 easing 插件

贴一下程序代码 :
代码如下:

$(document).ready(function(){
    var MyTime=false;    //定时器                
    var piclist=$("#piclist"); //图片列表
    var num=piclist.find("li").length; //自动检测图片广告个数
    var picnum=$("#picnum");
    var index=0; //起始序列
    var cur").siblings().removeClass("cur");    
        }
function int(){
    piclist.css({"width":width*num+"px"});
    var nums="";
    for(i=0; i        if(i<9){            
            nums+=""+0+(i+1)+"<\/span>";
            } else{                    
                nums+=""+(i+1)+"<\/span>";
                }
        }
    picnum.html(nums);
    cur(picnum.find("span").eq(index));
    }
//初始化执行    
int();        

$(picnum.find("span")).mouseover(function(){
    index=$("#picnum span").index($(this)[0]);    
    //if(!piclist.is(":animated")){
        move();        
        //}        
    })

            
var move=function move(){
    piclist.animate({"left":-width*index+"px"},{queue:false,duration:movetime, easing: "easeOutQuart"});
    cur(picnum.find("span").eq(index));
    }    

    $('div.flsad').hover(function(){
             if(MyTime){
                 clearInterval(MyTime);
             }
     },function(){
             MyTime = setInterval(function(){
             move()
                index++;
                if(index==num){index=0;}
             } , speed);
     });
     //自动开始
     MyTime = setInterval(function(){
        move();
        index++;
        if(index==num){index=0;}
     } , speed);    
})

在线演示
打包下载
推荐阅读
  • Python 数据可视化实战指南
    本文详细介绍如何使用 Python 进行数据可视化,涵盖从环境搭建到具体实例的全过程。 ... [详细]
  • 本文详细介绍了 Java 网站开发的相关资源和步骤,包括常用网站、开发环境和框架选择。 ... [详细]
  • 使用jqTransform插件美化表单
    jqTransform 是由 DFC Engineering 开发的一款 jQuery 插件,专用于美化表单元素,操作简便,能够美化包括输入框、单选按钮、多行文本域、下拉选择框和复选框在内的所有表单元素。 ... [详细]
  • javascript分页类支持页码格式
    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ... [详细]
  • Framework7:构建跨平台移动应用的高效框架
    Framework7 是一个开源免费的框架,适用于开发混合移动应用(原生与HTML混合)或iOS&Android风格的Web应用。此外,它还可以作为原型开发工具,帮助开发者快速创建应用原型。 ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • 本文介绍了 Go 语言中的高性能、可扩展、轻量级 Web 框架 Echo。Echo 框架简单易用,仅需几行代码即可启动一个高性能 HTTP 服务。 ... [详细]
  • 解决SQL Server数据库sa登录名无法连接的问题
    在安装SQL Server数据库后,使用Windows身份验证成功,但使用SQL Server身份验证时遇到问题。本文将介绍如何通过设置sa登录名的密码、启用登录名状态以及开启TCP协议来解决这一问题。 ... [详细]
  • MySQL 数据库连接方法
    本文介绍了如何使用 MySQL 命令行工具连接到指定的数据库。 ... [详细]
  • 本文详细介绍了 HTML 中 a 标签的 href 属性的多种用法,包括实现超链接、锚点以及调用 JavaScript 方法。通过具体的示例和解释,帮助开发者更好地理解和应用这些技术。 ... [详细]
  • Excel 数据分析基础
    Excel 是数据分析中最基本且强大的工具之一,具备多种实用功能和操作方法。本文将简要介绍 Excel 的不同版本及其兼容性问题,并探讨在处理大数据时的替代方案。 ... [详细]
  • 本文介绍了如何在 ASP.NET 中设置 Excel 单元格格式为文本,获取多个单元格区域并作为表头,以及进行单元格合并、赋值、格式设置等操作。 ... [详细]
  • LDAP服务器配置与管理
    本文介绍如何通过安装和配置SSSD服务来统一管理用户账户信息,并实现其他系统的登录调用。通过图形化交互界面配置LDAP服务器,确保用户账户信息的集中管理和安全访问。 ... [详细]
  • 本文详细介绍了Java代码分层的基本概念和常见分层模式,特别是MVC模式。同时探讨了不同项目需求下的分层策略,帮助读者更好地理解和应用Java分层思想。 ... [详细]
  • 如果应用程序经常播放密集、急促而又短暂的音效(如游戏音效)那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点:1)延时时间较长,且资源占用率高 ... [详细]
author-avatar
ar_wen2402851455
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有