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);
            
        }
    }
  • 相关阅读:
    如何将baidu地图中的baidu logo 去掉
    漂亮的圆角文本框 CSS3实现
    jQuery数字加减插件
    腾迅股票数据接口 http/javascript
    JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)
    关于编写性能高效的javascript事件的技术
    想做web开发 就学JavaScript
    git的简单理解及基础操作命令
    《CSS权威指南》基础复习+查漏补缺
    TypeScript Writing .d.ts files(编写声明文件)
  • 原文地址:https://www.cnblogs.com/JerryWang24/p/4440719.html
Copyright © 2011-2022 走看看