jQuery各大云服务器门户幻灯片轮播

jQuery各大云服务器门户幻灯片轮播

添加时间:2021-03-15 12:36:58
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:图片轮播
  • 模板颜色模板颜色:中级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

分类:图片代码 > 图片轮播 难易:中级

支持自动轮播播放的幻灯片

var glume = function(banners_id, focus_id) {
    this.$ctn = $('#' + banners_id);
    this.$focus = $('#' + focus_id);
    this.$adLis = null;
    this.$btns = null;
    this.switchSpeed = 5;//自动播放间隔(s)
    this.defOpacity = 1;
    this.crtIndex = 0;
    this.adLength = 0;
    this.timerSwitch = null;
    this.init();
};
glume.prototype = {
    fnNextIndex: function() {
        return (this.crtIndex >= this.adLength - 1) ? 0 : this.crtIndex + 1;
    },
    //动画切换
    fnSwitch: function(toIndex) {
        if (this.crtIndex == toIndex) {
            return;
        }
        this.$adLis.css('zIndex', 0);
        this.$adLis.filter(':eq(' + this.crtIndex + ')').css('zIndex', 2);
        this.$adLis.filter(':eq(' + toIndex + ')').css('zIndex', 1);
        this.$btns.removeClass('on');
        this.$btns.filter(':eq(' + toIndex + ')').addClass('on');
        var me = this;

        $(this.$adLis[this.crtIndex]).animate({
            opacity: 0
        }, 1000, function() {
            me.crtIndex = toIndex;
            $(this).css({
                opacity: me.defOpacity,
                zIndex: 0
            });
        });
    },
    fnAutoPlay: function() {
        this.fnSwitch(this.fnNextIndex());
    },
    fnPlay: function() {
        var me = this;
        me.timerSwitch = window.setInterval(function() {
            me.fnAutoPlay();
        }, me.switchSpeed * 1000);
    },
    fnStopPlay: function() {
        window.clearTimeout(this.timerSwitch);
        this.timerSwitch = null;
    },
    init: function() {
        this.$adLis = this.$ctn.children();
        this.$btns = this.$focus.children();
        this.adLength = this.$adLis.length;

        var me = this;
        //点击切换
        this.$focus.on('click', 'a', function(e) {
            e.preventDefault();
            var index = parseInt($(this).attr('data-index'), 10)
            me.fnSwitch(index);
        });
        this.$adLis.filter(':eq(' + this.crtIndex + ')').css('zIndex', 2);
        this.fnPlay();

        //hover时暂停动画
        this.$ctn.hover(function() {
            me.fnStopPlay();
        }, function() {
            me.fnPlay();
        });

        if ($.browser.msie && $.browser.version < 7) {
            this.$btns.hover(function() {
                $(this).addClass('hover');
            }, function() {
                $(this).removeClass('hover');
            });
        }
    }
};
var player1 = new glume('_banners', '_focus');
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:jQuery各大云服务器门户幻灯片轮播

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.095191s