封装了一个渐隐渐现的轮播图组件,请问如何解决 第一次切换效果不正确?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

封装了一个渐隐渐现的轮播图组件,请问如何解决 第一次切换效果不正确?

2016-05-30 13:23:45 2786 1

封装了一个渐隐渐现的轮播图组件,但是只有在第一次点击向左或向右按钮时,切换效果都不是渐隐渐现,其他时候切换效果都正确

轮播图组件代码

//轮播图组件
;(function($){

var Carousel = function(poster){

    var self = this;
    this.poster = poster;
    this.posterMain = poster.find(".slider-list");
    this.posterItem = poster.find(".slider-panel");
    this.posterSize = this.posterItem.length;
    this.prevBtn = poster.find(".slider-page .prev");
    this.nextBtn = poster.find(".slider-page .next");
    this.navSpan = poster.find(".pic-num span");
    this.isanimated = true;
    this.index = 0;
    //默认参数
    this.setting = {
        "autoPlay" : false,
        "speed" : 200,
        "delay" : 3000,
        "hasnav" : false
    };

    $.extend(this.setting,this.getSetting());

    //prevBtn
    this.prevBtn.click(function(){
        if(self.isanimated){
            self.index --;
            if(self.index < 0 ){
                self.index = self.posterSize -1;
            }
            self.showImg(self.index);
        }
    });

    //nextBtn
    this.nextBtn.click(function(){
        if(!self.isanimated){
            return;
        }
        self.index ++;
        if(self.index >= self.posterSize ){
            self.index = 0;
        }
        self.showImg(self.index);
    });

    //判断自动播放
    if(this.setting.autoPlay){
        this.autoPlay();
    };
};

Carousel.prototype = {

    //自动播放
    autoPlay : function(){
        var self = this;
        if(!self.isanimated){
            return;
        }
        self.index ++;
        if(self.index >= self.posterSize ){
            self.index = 0;
        }
        self.showImg(self.index);
        this.timer = window.setInterval(function(){
            self.autoPlay();
        },this.setting.delay);
    },

    //获取设置的参数
    getSetting : function(){
        var setting = this.poster.attr("data-setting");
        if( setting && setting != ""){
            return $.parseJSON(setting);
        }
        return {};
    },

    //showImg
    showImg : function(index){
        var _this = this;
        this.isanimated = false;
        this.posterItem.eq(index).addClass("on").animate({opacity:1,"z-index":0},this.speed,function(){
            _this.isanimated = true;
        }).siblings().removeClass("on").animate({opacity:0,"z-index":-1},this.speed);
        $(".pic-num span").eq(index).addClass("on").siblings(".pic-num span").removeClass("on");
    }
}

//初始化函数
Carousel.init = function(poster){
    var _this = this;
    poster.each(function(){
        new _this($(this));
    });
}

window["Carousel"] = Carousel;

})(jQuery);
html代码

screenshot

css代码
screenshot

请问呢该如何解决呢?求大神

取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:20:24
    ~1.this.index = -1;~
    ~2.data-setting='{"width":1000,"height":200,"autoPlay":true}'~

    构造函数的默认先手动调用一下:

    self.showImg(0);
    先将opacity属性初始化到元素上~~~

    0 0
相关问答

0

回答

请问为什么表格智能识别不支持excel的呀?

2022-11-21 14:40:07 112浏览量 回答数 0

1

回答

请问,如图,这个watch命令 耗时是科学表达式 E是啥意思?

2022-06-17 17:45:26 372浏览量 回答数 1

1

回答

广播topic是消息对多个设备,普通topic是消息对一个设备,这个理解是否正确?

2018-11-30 14:38:23 1476浏览量 回答数 1

2

回答

带有www的域名不能访问网站,请问如何解决?

2018-11-19 15:23:48 352浏览量 回答数 2

0

回答

请问钉钉的“钉一下”功能有外接的API吗?

2018-07-12 11:11:28 3239浏览量 回答数 0

1

回答

我的另一个阿里云账号上有主机域名和虚拟主机两个服务,我现在想转移到现在这个阿里云账号下,请问如何操作

2018-06-09 06:41:18 628浏览量 回答数 1

3

回答

discuz设置静态化以后,安装的插件不能用了,请问如何解决?

2016-12-27 17:44:10 2367浏览量 回答数 3

1

回答

redis 多个请求对一个key 实现 读取操作并发下怎么加锁

2016-02-05 16:03:51 6564浏览量 回答数 1

1

回答

广东管局审核到几号了请问

2015-11-12 12:47:41 2978浏览量 回答数 1

4

回答

请问广东管局审核到几号了

2015-06-03 12:01:04 4423浏览量 回答数 4
文章
问答
问答排行榜
最热
最新
相关电子书
更多
动态、高效,蚂蚁动态卡片的内核逻辑
立即下载
渐进式动画解决方案
立即下载
渐进式动画解决方案
立即下载