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);
            
        }
    }
  • 相关阅读:
    js 基础(面试前必看)
    typescript 使用的几种情况
    flutter 命令卡主的问题
    React 通过注释自动生成文档
    jest 测试入门(一)
    react hooks 全面转换攻略(三) 全局存储解决方案
    缓存穿透、击穿、雪崩区别和解决方案
    java8 lambda表达式
    maven中snapshot快照库和release发布库的区别和作用
    初识 Nacos 以及安装
  • 原文地址:https://www.cnblogs.com/JerryWang24/p/4440719.html
Copyright © 2011-2022 走看看