Смена картинки при наведении курсора
 

Для картинки прописана смена изображения при наведении курсора

<a href="" class="b-socials__link"><img src="images/icon_social-heart_big.png" 
				onmouseover="this.src='images/icon_social-heart_small.png'"
				onmouseout="this.src='images/icon_social-heart_big.png'"
				alt=""></a>

подскажите, как переписать этот код на jQuery, чтобы картинка менялась не при наведении и отводе курсора, а чтобы изображения с периодичностью сменяли друг друга, когда мышка наведена на картинку?

Как-то вот так:

var images = new Array("img1.jpg", "img2.jpg", "img3.jpg", "img4.jpeg");
var curId = 0;
var interval = 0;
function changeImg()
{
    curId = ( ++curId > images.length - 1 ) ? 0 : curId;
    $("#my_a img").attr("src", "./" + images[curId]);
}

$(document).ready(function(){
    $("#my_a").on('mouseover', function(){
    	    interval = setInterval(changeImg, 1000);
    });
    $("#my_a").on('mouseout', function(){
        clearInterval(interval);
    });
});

а в html соответственно <a id="my_a" href="#"><img src="./img1.jpg"></a>

пы сы: код рабочий, проверял