一个页面,多个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还是有一席之地很多很多的小单位啊.其实还会用到 我也放一个例子吧虽然我也不是很肯定有没有人写的比我更好啊但是我相信 我这个还是蛮实用的 ...
随机推荐
- win8如何删除未知账户(s-1-5-21-2000478354-1390067357-725345543-1003)
今天突然发现从别处复制来的游戏压缩文件不能解压,并且以前把游戏文件都是放在该目录下的,以前局域网玩起游戏来老是不能作为主机,且不能下载局域网玩的RPG地图,以前就注意过这个未知账户(s-1-5-21- ...
- android4.4短信新概念
android4.4对短信引入了一个全新的概念:默认短信应用.即android用户可以在系统设置里面选择一个默认的短信应用,只有这个应用才能进行手机的基本短信操作.按照google自己的解释这样做的原 ...
- iOS开发——数据持久化Swift篇&iCloud云存储
iCloud云存储 import UIKit class ViewController: UIViewController { override func viewDidLoad() { super. ...
- C 双向链表
单链表的结点都只有一个指向下一个结点的指针 单链表的数据元素无法直接访问其前驱元素 逆序访问单链表中的元素是极其耗时的操作! len = LinkList_Length(list); for (i=l ...
- webbroswer 后台注入脚本 的方法
HtmlElement script = webBrowser.Document.CreateElement("script"); script.SetAttribute(&quo ...
- 까페24 호스팅 php 에러메세지 출력
[문제점] 최근 까페24호스팅에서 php작업시화면에 에러메세지가 나오지 않아 디버깅시에 매우 곤란함 [해결책] .htaccess 내용에 아래추가.=================== ...
- JAXB - XML Schema Types, Binary Data
Data that has no "natural" representation with printable characters must, for inclusion in ...
- h2database源码浅析:SQL语句的执行
最近想好好了解一下数据库的原理,下载了h2database的源码,准备好好看看.此过程的一些想法,暂且记下来,权当做读码笔记吧! 为了调试准备的测试用例: @Test public void test ...
- kettle中Get Data from XML , Jason Input , 文本文件输入 使用示例
1.Get Data from XML xml文件内容: <head> <img id="1">菜||焦溜丸子||2013-03-28/image/0/00 ...
- Microsoft Word 的键盘快捷方式
Microsoft Word 的键盘快捷方式 全部显示 全部隐藏 本帮助文章中描述的键盘快捷方式适用于美式键盘布局.其他键盘布局的键可能与美式键盘上的键 不完全对应. 注释 本文不介绍如何为宏或自 ...