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);
            
        }
    }
  • 相关阅读:
    python常用函数 A
    从__name__=='__main__'说到__builtin__
    python常用魔法函数
    MySQL内核:InnoDB存储引擎 卷1
    “胡”说IC——菜鸟工程师完美进阶
    恶意代码分析实战
    转折点:移动互联网时代的商业法则
    大型网站系统与Java中间件实践
    《Node.js实战(双色)》作者之一——吴中骅访谈录
    网站运维技术与实践
  • 原文地址:https://www.cnblogs.com/JerryWang24/p/4440719.html
Copyright © 2011-2022 走看看