在圆点中更改 img答案

【问题标题】：Change img in slick dots在圆点中更改 img
【发布时间】：2017-08-08 09:20:09
【问题描述】：

客户想要更改圆点图像。所以我用他下载的图像创建了块并隐藏它们。之后我得到 img src 并创建

new Image()

来自隐藏块的 src。将 img 添加到 li，使用带有“悬停”和“默认”图像键的对象创建新数组。

$('.slick-dots li').each(function(i, e) {   
  var img = new Image();

  img.src = _images[i].normal;

_images - 包含对象的数组。每个值都有一个对象。每个对象都有不同 src 的 default 和 hover 键所以我有这样的东西

[ {'normal': 'src', 'hover': 'src'}, {'normal': 'src', 'hover': 'src'}, {'normal': 'src', 'hover': 'src'} ]

img.slickData = _images[i]; 
    img.setHover = function(e) {
        this.src = this.slickData.hover;
    };
    img.removeHover = function(e) {
        this.src = this.slickData.normal;
    };
    $(this).on('mouseenter', function(e) {
        $('img' ,this).attr('src', img.slickData.hover)
    });
    $(this).on('mouseleave', function(e) {
        $('img' ,this).attr('src', img.slickData.normal)
    });
    $(e).append(img);
});

}

悬停工作。但问题是我不知道如何捕捉滑动和可点击事件并将图像更改为“悬停 src”的正确方法

附：对不起我的英语:)

【问题讨论】：

创建minimal reproducible example 真的很有帮助。
“我不知道如何捕捉滑动和可点击事件的正确方法” - 文档列出了 slick 提供的所有事件。您可能想查看更改前/更改后的事件并滑动。

标签： javascript jquery image slick.js

【解决方案1】：

@CBroe，谢谢。这几乎就是我想要的。但是只有滑动才能正常工作 - 立即将 src 更改为先前的默认 img 并将 src 更改为悬停在活动点中。动画完成后的作品，然后更改src。之前做同样的事情，但反过来。

我做点别的，但是刷屏是最难理解的问题：

$('.slick-prev, .slick-next').on('click', function(){
    changeIcons() // when click next\prev
});
$('.services_slick').on('swipe', function(){
    changeIcons() // when swipe
});
changeIcons() // when page is loaded
function changeIcons(){
    var dotIndex = $('li.slick-active').index();
    $('.slick-dots li img').each(function(i){
        $(this).attr('src', _images[i].normal)
        $(this).parent().removeClass('services_icons_hover')
    });
    $('li.slick-active img').attr('src', _images[dotIndex].hover)
    $('li.slick-active').addClass('services_icons_hover');
}

【讨论】：