Question

客户希望改变光滑点图像。所以我用下载的图像创建了块并隐藏了它们。之后我得到img src并创建

new Image()

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

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

  img.src = _images[i].normal;

_images - 包含对象的数组。每个值都有一个对象。每个对象都有默认的悬停键和不同的src 所以我喜欢这样的

[{'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'的方法

P.S。对不起我的英文：）

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

用光滑的点改变img

1 个答案: