一个页面,多个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还是有一席之地很多很多的小单位啊.其实还会用到 我也放一个例子吧虽然我也不是很肯定有没有人写的比我更好啊但是我相信 我这个还是蛮实用的 ...
随机推荐
- sphinx全文检索之PHP使用(转)
基础 数据结构: CREATE TABLE email ( emailid mediumint(8) unsigned NOT NULL auto_increment COMMENT '邮件id', ...
- Unit Testing a zend-mvc application
Unit Testing a zend-mvc application A solid unit test suite is essential for ongoing development in ...
- ExtJs 下拉菜单分页工具插件 代码分析
Ext.ns("Ext.ux"); //创建插件对象 Ext.ux.PageSizePlugin = function(){ //调用父对象的构造方法,并为此插件生成一个预定义st ...
- eclipse在线安装svn插件
原文地址:http://www.cnblogs.com/xdp-gacl/p/4354199.html Eclipse在线安装SVN 一.SVN在线安装 下面为在线安装SVN插件.以下是在线安装步骤: ...
- Visual Studio dte 获取代码方法注释
- 【区间覆盖问题】uva 10020 - Minimal coverage
可以说是区间覆盖问题的例题... Note: 区间包含+排序扫描: 要求覆盖区间[s, t]; 1.把各区间按照Left从小到大排序,如果区间1的起点大于s,则无解(因为其他区间的左起点更大):否则选 ...
- [转]让你提升命令行效率的 Bash 快捷键
生活在 Bash shell 中,熟记以下快捷键,将极大的提高你的命令行操作效率. 编辑命令 Ctrl + a :移到命令行首 Ctrl + e :移到命令行尾 Ctrl + f :按字符前移(右向) ...
- jQuery UI - draggable 中文API
·概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个 ...
- 【转】为 XmlNode.SelectNodes 加上排序功能
测试资料: <Config> <Item a='/> <Item a='/> <Item a='/> <Item a='/> <Ite ...
- Cordova+angularjs+ionic+vs2015开发(一)
欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.Windows环境配置 1.如果已经安装VS2015,打开[工具]-[选项]找到Cordova选 ...