一个页面,多个flash(刚学jq插件)
只贴js那部分哦
调用
// flash轮播图
var sumF=$('.btnTabs span').length/4; //有四个flash
var flashT01=new flash($('.flash01'),sumF);
var flashT02=new flash($('.flash02'),sumF);
var flashT03=new flash($('.flash03'),sumF);
var flashT04=new flash($('.flash04'),sumF);
flashT01.createF();
flashT02.createF();
flashT03.createF();
flashT04.createF();
详细代码
/**
*
* @authors Jerry wong (you@example.org)
* @date 2015-04-16 09:23:42
* @version $Id$
*/ function flash(ele,num){
this.num=num;
this.element=ele;
this.timer=null;
this.oIndex=0; } flash.prototype={
createF:function(){
var _this=this;
_this.autoP();
$(_this.element).find('.btnNext').click(function(){
_this.nextBtn();
_this.autoP();
});
$(_this.element).find('.btnPrev').click(function(){
_this.prevBtn();
_this.autoP();
});
$(_this.element).find('.btnTabs span').click(function(){
_this.numClick(this);
_this.autoP();
});
},
nextBtn:function(){
this.oIndex++;
if (this.oIndex>=this.num) {
this.oIndex=0;
};
$(this.element).find('.adImg').eq(this.oIndex).fadeIn().siblings('.adImg').fadeOut();
$(this.element).find('.btnTabs').children('span').eq(this.oIndex).addClass('selected').siblings().removeClass('selected');
},
prevBtn:function(){
this.oIndex--;
if (this.oIndex<0) {
this.oIndex=this.num-1;
};
$(this.element).find('.adImg').eq(this.oIndex).fadeIn().siblings('.adImg').fadeOut();
$(this.element).find('.btnTabs').children('span').eq(this.oIndex).addClass('selected').siblings().removeClass('selected');
},
numClick:function(ev){
this.oIndex=$(ev).index();
$(ev).addClass('selected').siblings().removeClass('selected');
$(ev).parents().siblings('ul').children('.adImg').hide().eq(this.oIndex).fadeIn();
},
autoP:function(){
var _this=this;
clearInterval(_this.timer);
_this.timer=setInterval(function(){
_this.oIndex++;
if (_this.oIndex>_this.num-1) {
_this.oIndex=0;
};
$(_this.element).find('.adImg').eq(_this.oIndex).fadeIn().siblings('.adImg').fadeOut();
$(_this.element).find('.btnTabs').children('span').eq(_this.oIndex).addClass('selected').siblings().removeClass('selected');
}, 3000); }
}
一个页面,多个flash(刚学jq插件)的更多相关文章
- 需要一个分页,花了一个钟写了一个,刚学js,不是很完美
<script src="js/jquery.min.js" ></script> <script type="text/javascrip ...
- 通过用jQuery写一个页面,我学到了什么
概述 前几天面试,hr发来一个测试文件,让我做做看.我一看,其实就是根据PSD需求写一个页面,再加上一些互动效果即可. 刚好我之前学了切图,jquery等知识还没练手过,于是高兴的答应了. 最后花了3 ...
- ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml) 用javascript在客户端删除某一个cookie键值对 input点击链接另一个页面,各种操作。 C# 往线程里传参数的方法总结 TCP/IP 协议 用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图 (转)值得学习百度开源70+项目
ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml) 我们都知道在使用WebApi的时候Controller会自动将Action的返回值自动进行各种序列化处理(序列化为 ...
- C# 一个页面,多个Updatepannel,多个Timer
这几天在搞一个项目,其中一个页面里面有好几组数据要定时刷新,但是,每一组数据要刷新的时间不一样,所以就需要用到多个定时器.本人刚工作不久,对Js 的Ajax不太了解,反而对微软的那个Ajax相对了解一 ...
- JavaScript网站设计实践(七)编写最后一个页面 改进表单
一.最后一个页面 contact.html.改进表单 在该页面实现的功能: 几乎所有的网站都会有表单填写,对于用户输入和填写的数据,首先我们一般现在前台验证,然后再去后台验证. 在前台最简单的验证:检 ...
- Javascript把数据从一个页面的层传递到另一个页面层里面
背景:昨天头脑发热投了某一家国企的计算机类岗位(说是有前端岗位),通过找同学内推,虽然也笔试了一大堆题目(行测题,计算机网络,http协议,英译汉,古诗文默写,自己把品质排序并且进行200字以上的阐述 ...
- 一个简单而实用的JQ插件——lazyload.js图片延迟加载插件
前 言 Cherish 看多了炫酷的插件之后再来看这么一个小清新的东西,是不是突然感觉JQ插件感觉很友好了,简单强大最重要的是实用. 这篇文章将详细讲解一下lazyload.js的用法 lazy ...
- 开发谷歌浏览器插件会上瘾,搞了一个JSONViewer,一个页面格式化多条JSON,提升工作效率
最近写了一个谷歌浏览器插件(Chrome extension),拿出来分享下,希望能提升大家的工作效率. 一.背景 先说痛点:日常开发中,经常需要不停的把接口输出的JSON拷贝到在线JSON格式化页面 ...
- 写一个简单的JQ插件(例子)
虽然现在 vue angular react 当道啊但是那 JQ还是有一席之地很多很多的小单位啊.其实还会用到 我也放一个例子吧虽然我也不是很肯定有没有人写的比我更好啊但是我相信 我这个还是蛮实用的 ...
随机推荐
- [设计模式1]--单例模式(SINGLETON)
搞笑解释: 俺有6个漂亮的老婆,她们的老公都是我,我就是我们家里的老公Sigleton,她们只要说道“老公”,都是指的同一个人,那就是我 定义: 单例模式确保某一个类只有一个实例,而且自行实例化并向整 ...
- How to allow/block PING on Linux server – IPTables rules for icmp---reference
BY ADMIN - APRIL, 9TH 2014 The ‘PING’, it’s a command-line tool to check a host is reachable or not. ...
- Regular Expressions --正则表达式官方教程
http://docs.oracle.com/javase/tutorial/essential/regex/index.html This lesson explains how to use th ...
- 导入MyEclipse项目乱码
1.右键项目属性→text file encoding →修改为UTF-8,即可自动变成正常的.
- How the Kernel Manages Your Memory
http://duartes.org/gustavo/blog/post/how-the-kernel-manages-your-memory/ After examining the virtual ...
- 安装MySQL在最后的start service停住了解决方法
今天自己安装mysql在start service卡住了,原来是以前安装过,但是没有删干净.通过下面的方法解决了,特分享下 由于我的MySQL不知道什么原因突然打不开了并报了个10061的错,查了下原 ...
- Java项目打包在CMD或者Linux下运行
Java项目打包在CMD或者Linux下运行 1.在CMD下运行 在eclipse中将项目export成jar包,然后用压缩软件解压
- 关于Git和SVN的对比
1.git的提交是一个DAG有向无欢图.可以看到哥哥分支之间的合并关系.SVN的提交是一条直线. 2.git的提交版本号不是一个简单递增的数字,而是一个长达40位的十六进制数字(哈希值) 但是可以适用 ...
- 【Codeforces Round#279 Div.2】B. Queue
这题看别人的.就是那么诚实.http://www.cnblogs.com/zhyfzy/p/4117481.html B. Queue During the lunch break all n Ber ...
- win7 X64可用的单文件IE6
由于日常调试需要用到老版本的ie,没有办法!用ietest老师感觉不好使,动不动就死了.就找到了ie的单文件版,有博主 小明爱切糕制作,IE6.7.8单文件版本 http://www.cnblogs. ...