只贴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插件)的更多相关文章

  1. 需要一个分页,花了一个钟写了一个,刚学js,不是很完美

    <script src="js/jquery.min.js" ></script> <script type="text/javascrip ...

  2. 通过用jQuery写一个页面,我学到了什么

    概述 前几天面试,hr发来一个测试文件,让我做做看.我一看,其实就是根据PSD需求写一个页面,再加上一些互动效果即可. 刚好我之前学了切图,jquery等知识还没练手过,于是高兴的答应了. 最后花了3 ...

  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的返回值自动进行各种序列化处理(序列化为 ...

  4. C# 一个页面,多个Updatepannel,多个Timer

    这几天在搞一个项目,其中一个页面里面有好几组数据要定时刷新,但是,每一组数据要刷新的时间不一样,所以就需要用到多个定时器.本人刚工作不久,对Js 的Ajax不太了解,反而对微软的那个Ajax相对了解一 ...

  5. JavaScript网站设计实践(七)编写最后一个页面 改进表单

    一.最后一个页面 contact.html.改进表单 在该页面实现的功能: 几乎所有的网站都会有表单填写,对于用户输入和填写的数据,首先我们一般现在前台验证,然后再去后台验证. 在前台最简单的验证:检 ...

  6. Javascript把数据从一个页面的层传递到另一个页面层里面

    背景:昨天头脑发热投了某一家国企的计算机类岗位(说是有前端岗位),通过找同学内推,虽然也笔试了一大堆题目(行测题,计算机网络,http协议,英译汉,古诗文默写,自己把品质排序并且进行200字以上的阐述 ...

  7. 一个简单而实用的JQ插件——lazyload.js图片延迟加载插件

      前  言 Cherish 看多了炫酷的插件之后再来看这么一个小清新的东西,是不是突然感觉JQ插件感觉很友好了,简单强大最重要的是实用. 这篇文章将详细讲解一下lazyload.js的用法 lazy ...

  8. 开发谷歌浏览器插件会上瘾,搞了一个JSONViewer,一个页面格式化多条JSON,提升工作效率

    最近写了一个谷歌浏览器插件(Chrome extension),拿出来分享下,希望能提升大家的工作效率. 一.背景 先说痛点:日常开发中,经常需要不停的把接口输出的JSON拷贝到在线JSON格式化页面 ...

  9. 写一个简单的JQ插件(例子)

    虽然现在 vue angular react 当道啊但是那 JQ还是有一席之地很多很多的小单位啊.其实还会用到 我也放一个例子吧虽然我也不是很肯定有没有人写的比我更好啊但是我相信 我这个还是蛮实用的 ...

随机推荐

  1. ios的NSMutableString用法

    版权声明:本文为博主原创文章,未经博主允许不得转载. 详见代码: // //  main.m //  Foundation5-NSMutableString // //  Created by mj  ...

  2. 升级ADT22.6后,Android模拟器无法创建

    这 两天,在社区里看到有小伙伴们反应,自己在Eclipse下无法创建Android模拟器的问题.起初,自己也没太在意,我一直使用的是 Genymotion模拟器.然后,问题不解决,总有那么一天会让自己 ...

  3. Linux-PAM(Linux下的密碼認證和安全机制)系統管理員指南(中文版)

    he Linux-PAM 系统管理员指南作者:Andrew G. Morgan, morgan@linux.kernel.org翻译:孙国清(Thomas Sun),thomassun@yeah.ne ...

  4. Android 导入导出CSV,xls文件 .

    1 . http://www.bangchui.org/read.php?tid=62 2 .http://blog.csdn.net/xinzheng_wang/article/details/77 ...

  5. C# 之 日常积累(二)

    主要涉及(1)数字前补0:(2)去掉decimal类型后边无效的0相关问题. 1.数字前补0 ; ) { returnnumber.ToString(); } else { returnnumber. ...

  6. Java基础知识强化之网络编程笔记17:Android网络通信之 使用Http的Post方式读取网络数据(基于HTTP通信技术)

    使用Http的Post方式与网络交互通信.Post方式需要向网络传输一部分数据,同时具有输入流和输出流. 详见:Android(java)学习笔记210:采用post请求提交数据到服务器(qq登录案例 ...

  7. javascript笔记01:javascript入门介绍

    javascript是实现网页动态效果的基石,在web开发中扮演重要的角色,被广泛应用的各个领域 (1)网页游戏 (2)地图搜索 (3)股市信息查询 (4)web聊天 …………

  8. ios 界面间跳转方法总结

    接触ios也有一段时间了,偶然间,我们公司的技术总监兼我的导师,问我,你可知道,界面间的跳转有几种方式?我说出了两种,但是也有点含糊其辞,于是我就想一定要找个时间总结一下.有句话说的好,“前人种树,后 ...

  9. posix thread线程

    1. pthread线程通过调用你提供的某些函数开始.这个“线程函数”应该只有一个void*型参数,并返回系统的类型.2. 通过向pthread_create函数传递线程函数的地址和线程函数调用的参数 ...

  10. PHP之ThinkPHP数据操作CURD

    两个数据表 具体操作如下: /**********************数据库操作********************/       ////////添加数据//////////         ...