zoukankan      html  css  js  c++  java
  • 一个页面,多个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);
            
        }
    }
  • 相关阅读:
    适配器模式
    显示实现接口
    Mysql表引擎的切换
    Mysql事务隔离级别
    按照指定的格式解析字节数组
    委托和事件的简单实用
    C#压缩和解压缩字节(GZip)
    Mysql数据库批量添加数据
    常用的分页类
    保证依赖的服务已全部启动
  • 原文地址:https://www.cnblogs.com/JerryWang24/p/4440719.html
Copyright © 2011-2022 走看看