给ULWOW 写的广告效果(缓动切换)

幽狼魔兽 站长所托,写了一个 广告切换效果(点击查看DEMO)  形式是常见的形式,但是在功能上有一定的拓展。

主要功能:

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

ContractedBlock.gifExpandedBlockStart.gifCode
$(document).ready(function(){
    
var MyTime=false;    //定时器                   
    var piclist=$("#piclist"); //图片列表
    var num=piclist.find("li").length; //自动检测图片广告个数
    var picnum=$("#picnum"); 
    
var index=0//起始序列
    var width=388//广告宽度
    var movetime=600//单次动画所用时间
    var speed=3000//切换时间间隔    
    
    
//标记当前
function cur(ele){        
        ele
=$(ele)? $(ele):ele;
        ele.addClass(
"cur").siblings().removeClass("cur");    
        }
function int(){
    piclist.css({
"width":width*num+"px"});
    
var nums=""
    
for(i=0; i<num; i++){        
        
if(i<9){            
            nums
+="<span>"+0+(i+1)+"<\/span>";
            } 
else{                    
                nums
+="<span>"+(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));
    }    
    
    $(
'#flsad').hover(function(){
              
if(MyTime){
                 clearInterval(MyTime);
              }
     },
function(){
              MyTime 
= setInterval(function(){
                move()
                index
++;
                
if(index==num){index=0;}
              } , speed);
     });
     
//自动开始 
     var MyTime = setInterval(function(){
        move();
        index
++;
        
if(index==num){index=0;}
     } , speed);     


 

转载于:https://www.cnblogs.com/trance/archive/2009/05/25/1489036.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/381335.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java ecdh秘钥交换_DH密钥交换和ECDH原理(转)

下面我们以Alice和Bob为例叙述Diffie-Hellman密钥交换的原理。1,Diffie-Hellman交换过程中涉及到的所有参与者定义一个组&#xff0c;在这个组中定义一个大质数p&#xff0c;底数g。2,Diffie-Hellman密钥交换是一个两部分的过程&#xff0c;Alice和Bob都需要一个私有的数字a&am…

用VBA去除Excel工作表保护密码

今天帮同事解决个EXCEL问题&#xff0c;现记在这&#xff0c;以作备忘 现象&#xff1a; 想要修改保护单元 格的内容&#xff0c;在使用“工具”菜单“保护”子菜单的“撤消工作表保护”命令&#xff0c;这时要求输入密码。 解决方案&#xff1a;网上找到一文http://www.excel1…

MVC学习笔记1 MVC概述

MVC概述MVC三种角色– Model&#xff1a; 用于存储数据的组件&#xff08;与领域模型概念不同&#xff09;。– View&#xff1a; 根据Model数据进行内容展示的组件– Controller&#xff1a;接受并处理用户指令&#xff08;操作Model&#xff09;&#xff0c;选择一个Vie…

设计一个医院

源于个人网站&#xff1a;http://programmer.2008red.com/programmer/article_647_777_1.shtml 收到一封来自Exoweb的邮件&#xff0c;让去面试&#xff08;败的很惨&#xff0c;呵呵。过了好长时间了&#xff0c;都忘记这事了&#xff0c;结果这公司来了邮件&#xff0c;说不能…

powerbi的功能介绍_Power BI:1分钟快速生成可视化报表

1.什么是Power BI &#xff1f;Power BI 是微软推出的可视化工具&#xff0c;先来看看微软官方是怎么介绍的&#xff1a;使用用于自助服务和企业商业智能 (BI) 的统一、可扩展平台&#xff08;该平台易于使用&#xff0c;可帮助获取更深入的数据见解&#xff09;&#xff0c;连…

易语言 java支持_开源Java客户端可以连接易语言服务器

我们的服务端处理客户端的连接请求是同步进行的&#xff0c; 每次接收到来自客户端的连接请求后&#xff0c;都要先跟当前的客户端通信完之后才能再处理下一个连接请求。 这在并发比较多的情况下会严重影响程序的性能&#xff0c;为此&#xff0c;我们可以把它改为如下这种异步…

Javascript--File对象

描述: 提供对文件属性的访问.属性: 属性描述Attributes设置或返回文件或文件夹的属性DateCreated返回指定文件或文件夹的创建时间DateLastAccessed返回最近访问文件或文件夹的创建时间DateLastModified返回最后修改指定文件和文件夹的日期和日期Drive返回指定文件或文件夹所在的…

idea怎么调试jsp页面_解决idea的c标签错误

Hello,World.土土来啦&#xff01;最近做jq项目&#xff0c;遇到各种各样的问题。首先就是c标签的错误。对&#xff0c;没错&#xff0c;就是这一串因为土土上学期学的是jsp,所以是在myeclipse做的&#xff0c;这学期就想在idea做后端。然后复制粘贴之前的项目的时候&#xff0…

[SlickEdit] SlickEdit支持目录别名FTP控件更新

有阵没写代码了&#xff0c;SlickEdit升级到2009还没怎么用过&#xff0c;Option面板改动得更像Eclipse了&#xff0c;反正IDE工具也不知道到底谁抄袭谁&#xff0c;只是Symbol Coloring设置太唬人了吧&#xff0c;&#xff0c;默认的symbol coloring总是出现字符偏移&#xff…

有一台服务器远程失败其他电脑可以_使用闲置电视盒子打造家庭网盘和远程下载器和小型服务器(二)...

使用闲置电视盒子打造家庭网盘和远程下载器系列(二)本系列分为五章一、综述二、电视盒子的root三、app的安装和服务器环境的搭建四、网盘系统的部署和使用五、远程下载系统搭建和实现昨天写了第一章&#xff0c;我这是首次写东西&#xff0c;没想到能得到这么多朋友关注&#x…

基于C#.NET的--Windows进程管理工具

基于.NET(C#)编写。 实现了进程的树状显示父子关系&#xff0c;其中应用到了WMI编程&#xff0c;以及P-invoke. 下载地址&#xff1a; 点击右键另存为 地址如上&#xff0c;需要安装.NET环境&#xff0c;地址:http://www.microsoft.com/downloads/details.aspx?displaylangzh-…

前端的请求最大线程数是多少啊_面试官:创建多少个线程合适,我该怎么说?...

转载&#xff1a;https://mp.weixin.qq.com/s/j5d4Jtxo0RgJWgpnG9HxlQ为什么要使用多线程&#xff1f;防止并发编程出错最好的办法就是不写并发程序既然多线程编程容易出错&#xff0c;为什么它还经久不衰呢&#xff1f;A&#xff1a;那还用说&#xff0c;肯定在某些方面有特长…

百度地图infowindow的close事件_百度地图蒙圈:车主要加油误导母婴店 跑偏理由令人啼笑皆非...

常在江湖飘&#xff0c;哪有不挨刀。经常驾车出门在外的您&#xff0c;有过被导航坑的经历么&#xff1f;其实在早些年手机导航刚刚兴起的时候&#xff0c;这类现象确实比较常见&#xff0c;但是到了如今大数据的时代&#xff0c;手机导航数据更新比较及时&#xff0c;问题已经…

商业模式新生代_业务分析基础 - 商业模式新生代01篇

商业模式画布商业模式新生代由亚历山大奥斯特瓦德&#xff08;Alexander Osterwalder&#xff09;和伊夫皮尼厄&#xff08;Yves Pigneur&#xff09;编写&#xff0c;发表于2016年。该书提出了商业模式画布模型&#xff0c;既可以用于创业公司&#xff08;Start-ups&#xff0…

折半查找和二叉排序树的时间性能_leecode刷题----二分搜索与二叉查找(排序)树...

预备知识&#xff1a;二分查找已知一个排序数组A&#xff0c;如A[-1,2,5,20,90,100,207,800]&#xff0c;另外一个乱序数组B&#xff0c;如B[50,90,3,-1,2-7,80],求B中任意某个元素是否在A中出现&#xff0c;结果存储在数组C中&#xff0c;出现用1代表&#xff0c;未出现用0代表…

php pacs,DICOM医学图像处理:WEB PACS初谈四,PHP DICOM Class – 只要踏出一步,路就在前方——zssure – CSDN博客...

背景&#xff1a;预告了好久的几篇专栏博文一直没有整理好&#xff0c;主要原因是早前希望搭建的WML服务器计划遇到了问题。起初以为参照DCMTK的官方文档wwwapp.txt结合前两天搭建的WAMP服务器可以顺利的实现WML服务&#xff0c;借此就可以同时完成WEB PACS系列以及搭建Dicom W…

mfc在运行的时候为什么没有实例化_为什么不建议把数据库部署在Docker容器内?...

本文同步Java知音社区&#xff0c;专注于Java原文&#xff1a;https://www.toutiao.com/i6805798581971190276/近2年Docker非常的火热&#xff0c;各位开发者恨不得把所有的应用、软件都部署在Docker容器中&#xff0c;但是您确定也要把数据库也部署的容器中吗&#xff1f;这个…

泛型的优势

假设需要一个两个整形变量交换的函数&#xff0c;我们很快就可以嗒嗒嗒嗒的敲出下面的 Swap 函数&#xff1a;void Swap(ref int lhs, ref int rhs){int temp lhs;lhs rhs;rhs temp;}随着项目进展&#xff0c;我们发现&#xff0c;需要用到 Swap 函数的不仅是整形,变量 还有…

系统分析师资料_如何成为一名数据分析师?

随着大数据的逐渐普及&#xff0c;数据分析越来越普遍应用到各个职能岗位&#xff0c;也就是说&#xff0c;不论你在哪个行业&#xff0c;都会需要数据分析技能。数据岗位的薪资水涨船高&#xff0c;成为目前最有潜力的职业选择之一。根据猎聘发布《猎聘2019年中国AI&大数据…

设置文本区域大小_数据验证基本设置技巧

数据验证可以规范用户的文本及数字输入格式&#xff0c;如只能输入指定区间的数值、只能输入文本数据、限制输入空格、限制输入重复值等。设置了数据验证条件后&#xff0c;对符合条件的数据允许输入&#xff0c;对不符合条件的数据则禁止输入。因此&#xff0c;利用此设置可以…