JS code, smoothing aid



  • He wrote a scruple the job of finding all the elements in the statue with the class--product and changing the miniatures in a mice, but something-- it doesn't work as expected. ♪ ♪

    Questions in the code comments below.

    function Product(elem, imagesBox) {
        this.product = elem;
        if(!this.product) {
            return;
        } else {
            self = this;
            this.imagesBox = this.product.querySelector(imagesBox);
            this.imagesBox.style.display = 'none';
            this.images = this.product.querySelectorAll('img');
    
        this.event = function() {
            function startSlider(elem,i) {
                function getImgSrc(src) {
                    var arrSrc = [];
                    for(var i = 0; i < self.images.length; i++) {
                        arrSrc.push(self.images[i].getAttribute(src));
                    }
                    return arrSrc;
                }
                var src = getImgSrc('src');
                var srcset = getImgSrc('srcset');
                elem.setAttribute('src', src[i]);
                elem.setAttribute('srcset', srcset[i]);
                if(i == self.images.length - 1) {
                    i = 0;
                } else {
                    i++;
                }
                var timer = setTimeout(startSlider, 1000, elem, i);
                self.product.addEventListener('mouseout', function () {
                    clearTimeout(timer);
                    //непонятно как то устанавливает значения атрибутов, ведь должен при уходе мыши ставить 
                    //первые элементы соответствующих массивов,
                    //а ставит предшествующую показанной.
                    elem.setAttribute('src', src[0]);
                    elem.setAttribute('srcset', srcset[0]);
                });
            }
            self.product.addEventListener('mouseover', function (event) {
                if(event.target == self.product.querySelector('img')) {
                    var i = 1;
                    startSlider(event.target, i);
                }
                else return;
            });
        }
        this.event();
    
    }
    

    }

    function Products(ids) {
    this.products = document.querySelector(ids);
    if(!this.products)return;
    for(var i = 0; i < this.products.children.length; i++) {
    //присвоение происходит только последнему ребенку коллекции, почему?Точнее метод event класса Product работает только на последнем элементе.
    this.products.children[i] = new Product(this.products.children[i], '.thumbnails');
    }
    }
    var products = new Products('.products');



  • What if the events are replaced by https://learn.javascript.ru/mousemove-mouseover-mouseout-mouseenter-mouseleave#%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D1%8F-mouseenter-%D0%B8-mouseleave ?


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2