老师帮我看下这个返回值一直有问题

来源:5-2 滑入滑出的第一种实现方式--实现滑动功能

vivi_li

2020-06-01 09:13:51

判断是否有transition属性一直返回false  是为什么呢 我看dom上面有这个属性

(function () {
   function Slider($elem, options) {
       this.$elem = $elem;
       this.options = options;
       this.$items = this.$elem.find(".slider-item");
       this.$indicators = this.$elem.find(".slider-indicator");
       this.itemNum = this.$items.length;
       this.curIndex = this._getCorrectIndex(this.options.activeIndex);
       this.$controls = this.$elem.find(".slider-control");
       this._init();
   }

   Slider.DEFAULTS = {
       css3: true,
       js: false,
       animation: 'fade', //slider
       activeIndex: 0,//默认显示第几张
       Interval: 0//自动切换功能
   }
   //初始化
   Slider.prototype._init = function () {
       var self = this;
       //声明切换样式
       //移出下方圆点样式,显示当前索引样式
       this.$indicators.removeClass("slider-indicator-active");
       this.$indicators.eq(this.curIndex).addClass("slider-indicator-active");
       //to
       if (this.options.animation === "slide") {
           this.$elem.addClass("slider-slide");
           this.$items.eq(this.curIndex).css({left: 0});

           //获取每一个items宽度值
           this.itemsWidth = this.$items.eq(0).width();
           console.log(this.$items.eq(0).attr('transition'))
           console.log(this.$items.eq(0))
           this.transitionClass = this.$items.eq(0).hasClass('transition')?"transition":"";
           //move init
           this.$items.move(this.options);
           this.to = this._slide
       } else {
           this.$elem.addClass("slider-fade");
           this.$items.eq(this.curIndex).show();
           //showHide init
           this.$items.showHide(this.options);
           this.to = this._fade;
       }
       //bind event
       this.$elem
           .hover(function () {
               self.$controls.show()
           }, function () {
               self.$controls.hide()
           })
           .on("click", ".slider-control-lf", function () {
               //传入第二个参数,通过第二个参数的正负值判断左右;
               self.to(self._getCorrectIndex(self.curIndex - 1), 1);
           })
           .on("click", ".slider-control-rt", function () {
               self.to(self._getCorrectIndex(self.curIndex + 1), -1);
           })
           .on("click", ".slider-indicator", function () {
               self.to(self._getCorrectIndex(self.$indicators.index(this)));
           })
       if (this.options.Interval && !isNaN(Number(this.options.Interval))) {
           this.$elem.hover($.proxy(this.pause, this), $.proxy(this.auto, this))
           this.auto();
       }
       //send message
       this.$items.on('show shown hide hidden', function (e) {
           self.$elem.trigger("slider-" + e.type, [self.$items.index(this), this]);
       })
   }

   Slider.prototype._getCorrectIndex = function (index) {
       if (isNaN(Number(index))) return 0;
       if (index < 0) return this.itemNum - 1;
       if (index > this.itemNum - 1) return 0;
       return index;
   }

   Slider.prototype._fade = function (index) {
       if (this.curIndex === index) return;
       this.$items.eq(this.curIndex).showHide("hide");
       this.$items.eq(index).showHide("show")
       this.$indicators.eq(this.curIndex).removeClass("slider-indicator-active");
       this.$indicators.eq(index).addClass("slider-indicator-active");
       this.curIndex = index;

   }
   Slider.prototype._slide = function (index, direction) {
       console.log( this.transitionClass)
       var self = this;
       if (this.curIndex === index) return;
       //确定滑入滑出的方向
       if (!direction) { //click indicators
           if (this.curIndex > index) {
               direction = 1;
           } else if (this.curIndex < index) {
               direction = -1;
           }
       }
       //设置指定滑入幻灯片的初始位置
       //找到指定的幻灯片设置位置
       this.$items.eq(index).removeClass(this.transitionClass).css('left', -1 * direction * this.itemsWidth)
       //当前幻灯片滑出可视区域,指定幻灯片滑入可视区域
       setTimeout(function () {
           self.$items.eq(self.curIndex).move("x",direction*self.itemsWidth);
           self.$items.eq(index).addClass(self.transitionClass).move("x",0);
           self.curIndex=index;
       },20)
       //激活indicator
       //移出下方圆点样式,显示当前索引样式
       this.$indicators.removeClass("slider-indicator-active");
       this.$indicators.eq(this.curIndex).addClass("slider-indicator-active");
   }
   Slider.prototype.auto = function () {
       var self = this;
       this.IntervalId = setInterval(function () {
           self.to(self._getCorrectIndex(self.curIndex + 1))
       }, this.options.Interval);
   }
   Slider.prototype.pause = function () {
       clearInterval(this.IntervalId);
   }
   $.fn.extend({
       slider: function (option) {
           return this.each(function () {
               var $this = $(this);
               //$(this).data()获取以data-开头的属性值,下述方法默认active属性先通过option获取,然后通过data-active属性获取,
               var slider = $this.data("slider");//从data-dropdown属性内获取
               var options = $.extend({}, Slider.DEFAULTS, $this.data(), typeof option === "object" && option);
               if (!slider) {//first time 初始化
                   $this.data("dropdown", slider = new Slider($this, options))
               }
               //传入两个参数,一个元素,一个自定义动画对象
               //实例化对象并接收,如果对象下面没有该方法,程序并不会报错,只会返回undefined;
               if (typeof slider[option] === "function") {
                   slider[option]();
               }
           });
       }
   })
})(jQuery)

写回答

2回答

好帮手慕星星

2020-06-01

同学你好,自己能够解决问题是很棒的哦!

祝学习愉快~

0

vivi_li

提问者

2020-06-01

this.transitionClass = this.$items.eq(0).hasClass('transition')?"transition":"";  这个在初始化的时候不是在调用了move方法之后才添加上了transition属性么?  如果在添加之前进行判断 不是一直会返回false?

0
hivi_li
h 好吧 视频老师说了 抱歉视频没看完都提问啦 哈哈
h020-06-01
共1条回复

0 学习 · 14456 问题

查看课程