Question

要求：我们正在创建产品登陆页面，对于特定的父级磁贴，我们有5到6个图像，在加载时我们只加载第一个图像并且我们应该将剩余的图像作为旋转木马逐个动态加载。

所以我们为此编写了一个自定义绑定。

问题：当我们将鼠标悬停在图像上时，下一个图像会正常滑动，但从第三个图像开始，它始终会返回到第一个图像并从一开始就加载。看起来甚至 - 但是当我们将鼠标悬停在产品图块上时，鼠标悬停事件会再次被重新触发，因此我们面临图像的以下序列问题

序列： 1,2 1,2,3 1,2,3,4等等。

悬停时预计： 1,2,3,4,5

<!-- ko if: $parents[1].currentWidth() > 1024 -->
            <div class="customized-slider-wrapper" data-bind="PLPTileSizeOnHover: $data, allImageURLs: fullImageURLs()">
              <div class="customized-slider">

              </div>
            </div>
            <!-- /ko -->

以下是淘汰赛代码

    ko.bindingHandlers.PLPTileSizeOnHover = {
  init: function(element, valueAccessor, allBindings, viewModel, bindingContext){
  var imgArray = allBindings.get('allImageURLs');
  if(imgArray.length){
    for(var i = 0; i < imgArray.length; i++){
     var createDiv = document.createElement('div');
      createDiv.className = 'individual-tile';
      element.getElementsByClassName('customized-slider')[0].appendChild(createDiv);
      var img = document.createElement('img');
      img.src =  i === 0 ? imgArray[0] : '/file/general/show_loader_showcase.gif';
      img.className = 'product-images';
      createDiv.appendChild(img);
  }
 }
},
  update: function(element, valueAccessor, allBindings, viewModel, bindingContext){
    var _index = 0;
    var ToBeScrolledBy = 0;
    var Scroller = $(element).find('.customized-slider').eq(0);
    var TotalSlides = $(element).find('.customized-slider').eq(0).children();
    var SlideWidth = TotalSlides[0] && TotalSlides[0].clientWidth;
    var StopAnimation;
      element.onmouseover = function(){
      StopAnimation = setInterval(function(){
      _index++;
      setTimeout(function() {$($(element).find('.product-images')[_index]).attr('src', imgArray[_index]);}, 0);

      if( _index >= TotalSlides.length ){
        _index = 0;
      }

      ToBeScrolledBy = SlideWidth * _index;
      console.log('ToBeScrolledBy..',ToBeScrolledBy);
      $(Scroller).css({
        'transform': 'translateX(-'+ToBeScrolledBy +'px)'
      });   
    },1500);
  }

  element.onmouseout = function() {
    $('.addSkuSize').remove();
      clearInterval(StopAnimation);
      _index = 0;
      $(Scroller).css({
        'transform': 'translateX(0)'
      });
    }
  }

}

任何帮助都将不胜感激。

在div上丢失mouseover事件（电子商务产品列表页面）

0 个答案: