当用户将鼠标悬停在产品图块上时,我想在产品列表页面上实现滚动图像。最初将显示第一张图像,并在悬停时开始幻灯片放映。每个产品图块将具有不同数量的幻灯片图像。

问题:将鼠标悬停在一个阵列上有五个图像的图像上时,开始放映幻灯片并显示第二个图像,但是显示的是第一幅图像而不是第三幅图像。以下是顺序:
数字表示图像索引
1,2
1,2,3
1,2,3,4
1,2,3,4,5
预期:1、2、3、4、5

还观察到鼠标悬停事件未注册。

下面是代码:

<div class="customized-slider-wrapper" data-bind="PLPTileSizeOnHover: $data">
    <div class="customized-slider" data-bind="foreach: fullImageURLs">
    <div class="individual-tile">
        <img data-bind="attr: { src: $index() === 0? $data : '../file/general/show_loader_showcase.gif' }" class="product-images" />
    </div>
    </div>
</div>


KO代码

  ko.bindingHandlers.PLPTileSizeOnHover = {
      init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var data = ko.unwrap(valueAccessor());
       // Intiallizing variables for product image animation
        var _index = 0;
        var imgArray = data.fullImageURLs();
        var toBeScrolledBy = 0;
        var scroller = $(element).find('.customized-slider').eq(0);
        var StopAnimation;
        element.onmouseover = function () {


          //Start Animation
          StopAnimation = setInterval(function () {
            var totalSlides = $(element).find('.customized-slider').eq(0).children();
            var slideWidth = totalSlides[0] && totalSlides[0].clientWidth;
            _index++;
            $($(element).find('.product-images')[_index]).attr('src', imgArray[_index]);
            if (_index >= imgArray.length) {
              _index = 0;
            }
            toBeScrolledBy = slideWidth * _index;
            $(scroller).css({
              'transform': 'translateX(-' + toBeScrolledBy + 'px)'
            });
          }, 1500);
        }

        element.onmouseout = function () {

          //End of animation and reseting the index and div postion
          clearInterval(StopAnimation);
          _index = 0;
          $(scroller).css({
            'transform': 'translateX(0)'
          });
        }
      }
    }


要求是将鼠标悬停时一张一张地加载图像。无法先加载所有图像。

保留开发工具后,代码可在chrome上运行。

小提琴https://jsfiddle.net/harpreetsjs/cvzrnaLy/

最佳答案

问题是mouseovermouseout事件。他们也会被元素的孩子解雇并冒泡。因此,当孩子们四处走动时,您会“随机地”得到这些事件。相反,您想使用mouseentermouseleave

我合并了此更改以及一些常规清理:



ko.bindingHandlers.PLPTileSizeOnHover = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var data = ko.unwrap(valueAccessor());
        console.log(data);
        // Intiallizing variables for product image animation
        var _index = 0;
        var imgArray = data;
        var toBeScrolledBy = 0;
        var scroller = $(element).find('.customized-slider').eq(0);
        var StopAnimation;
        element.onmouseenter = function() {
            //Start Animation
            console.log("start");
            StopAnimation = setInterval(function() {
                console.log("Started " + _index);
                var totalSlides = scroller.children();
                console.log("totalSlides " + totalSlides.length);
                var slideWidth = totalSlides[0] && totalSlides[0].clientWidth;
                console.log('slideWidth', slideWidth);
                _index++;
                scroller.find('.product-images').eq(_index).attr('src', imgArray[_index]);
                if (_index >= imgArray.length) {
                    _index = 0;
                }
                toBeScrolledBy = slideWidth * _index;
                scroller.css({
                    'transform': 'translateX(-' + toBeScrolledBy + 'px)'
                });

            }, 1500);
        }

        element.onmouseleave = function() {
            //End of animation and reseting the index and div postion
            console.log("clear");
            clearInterval(StopAnimation);
            _index = 0;
            scroller.css({
                'transform': 'translateX(0)'
            });
        }
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        console.log("Update cakked");
    }
}


var fullImageURLs = ko.observableArray([
    'https://product-images.barneys.com/is/image/Barneys/505670716_1_ShoeSide?$oc_grid_fixed$',
    'https://product-images.barneys.com/is/image/Barneys/505670733_1_ShoeSide?$oc_grid_fixed$',
    'https://product-images.barneys.com/is/image/Barneys/505670750_1_ShoeSide?$oc_grid_fixed$   '
]);
console.log(fullImageURLs());
ko.applyBindings(fullImageURLs);

.customized-slider-wrapper {
    height: 370px;
    position: relative;
    overflow: hidden;
    width: 100%;
    width: 231px;
}

.customized-slider {
    position: absolute;
    left: 0;
    width: 1800px;
    height: 100%;
    transition: transform .5s ease 0s;
    display: block;
}

.individual-tile {
    float: left;
}

.customized-slider-wrapper .customized-slider>div img {
    height: 252px;
    float: none;
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    vertical-align: middle;
    border: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<a class="search-products-images">
    <div class="customized-slider-wrapper" data-bind="PLPTileSizeOnHover: $data">
        <div class="customized-slider" data-bind="foreach: $data">
            <div class="individual-tile">
                <img data-bind="attr: { src: $index() === 0? $data : 'http://placehold.it/106&text=1' }" class="product-images" />
            </div>
        </div>
    </div>
</a>

关于javascript - 自定义绑定(bind)的 knockout 滑动图像问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50703902/

10-12 12:54
查看更多