javascript - 更改图像中的圆点

Question

客户想要更改光滑点图像。所以我用他下载的图像创建了 block 并隐藏它们。之后我获取 img src 并创建

new Image()

带有来自隐藏 block 的 src。将 img 添加到 li，使用带有 'hover' 和 'default' 图像键的对象创建新数组。

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

  img.src = _images[i].normal;

_images - 包含对象的数组。每个值都有一个对象。每个对象都有默认和悬停键，具有不同的源 所以我有这样的东西

[ {'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);
});

}

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

附注抱歉我的英语:)

Answer 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');
}