滑らかな点での画像の変更

Question

お客様は滑らかな点の画像を変更したいと考えています。だから、私はダウンロードした画像でブロックを作成し、それらを隠す。その後、私はimg srcを取得し、作成します

new Image() 

隠しブロックからのsrcです。 liにimgを追加し、 'hover'と 'default'イメージのキーを持つオブジェクトで新しい配列を作成します。

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

    img.src = _images[i].normal; 

_images - オブジェクトを含む配列。各値には1つのオブジェクトがあります。各オブジェクトには、デフォルトを有し、異なるSRC にキーを合わせるので、私はこの

のようななめらか[{ '通常'： 'SRC'、 'ホバー'： 'SRC'}持って、{ '通常'： 'SRC' を'ホバー' 'SRC'}、{ '通常'： 'SRC'、 'ホバー'： '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」に変更するかについての厳しい方法を知らないことです。

P.S.私の英語で申し訳ありません。

Answer 1

@CBroe、ありがとうございます。これはほとんど私が欲しいものです。しかし、スワイプの動作のみが必要です。直前にsrcをデフォルトのimgに変更し、srcをアクティブなドットでホバーに変更します。 アニメーションが完了した後の作業の後、srcを変更します。同じことをする前に、逆にしてください。

私が何かを行うが、スワイプは、最も不可解な質問です：[MCVE]作るために本当に役立つだろう

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