Блог

У меня проблема со скриптом, который циклически перебирает изображения.

Как только указатель мыши перемещается по изображению, я хочу приостановить сценарий (InfinityLoop). Когда мышь покидает изображение, сценарий должен продолжаться.

Вот пример выполнения: http://jsfiddle.net/64W8u /

Я пытаюсь со дня на день, но не запустил его :-/

Спасибо за вашу большую помощь здесь!

 var j = jQuery.noConflict();

jQuery(document).ready(function()
{
/* stage functions */
j("#small img").mouseover(function()
{
    stageReset();
    var imageurl = j(this).attr("src");
    var aimage = imageurl.replace(".jpg", "_a.jpg");
    var bimage = imageurl.replace(".jpg", "_b.jpg");
    j(this).attr("src", aimage);
    j("#big img").attr("src", bimage);
});

j("#small img").mouseout(function()
{
    var imageurl = j(this).attr("src");
    var aimage = imageurl.replace("_a.jpg", ".jpg");
    j(this).attr("src",aimage);
});

function stageReset()
{
    j("#small img").each(function()
    {
        var reseturl = j(this).attr("src");
        reseturl = reseturl.replace("_a.jpg", ".jpg");
        j(this).attr("src", reseturl);
    });
}
}

jQuery.fn.stageCycle = function()
{
var itemInterval = 2000;
var numberOfItems = j("#small img").length;
var currentItem = 0;

var InfinityLoop = setInterval(function()
    {
    var url = j("#small img").eq(currentItem).attr("src");
    var urla = url.replace(".jpg","_a.jpg");
    var urlb = url.replace(".jpg","_b.jpg");

    stageReset();

    j("#small img").eq(currentItem).attr("src",urla);
    j("#big img").attr("src",urlb);


    if(currentItem == numberOfItems-1)
        {
        currentItem = 0;
        }
    else
        {
        currentItem  ;
        }

    }, itemInterval);
};

j(window).stageCycle();

});
  

Я бы не стал использовать setInterval() для этого. Вместо этого используйте setTimeout() функцию with, которая после перехода к следующему отображаемому изображению запустит другое setTimeout() . Затем вы можете добиться желаемой функциональности наведения курсора мыши, вызвав clearTimeout() идентификатор, возвращаемый setTimeout() вызовами, и при наведении курсора мыши вы вызываете setTimeout() снова, чтобы перезапустить цикл.

Пример:

 var img = document.getElementById("imd_id");
var nextImageTimer;
function showNextImage() {
    img.src = "NEXT_IMAGE_URL";
    nextImageTimer = setTimeout(showNextImage, 1000);
}

// In your mouseover:
clearTimeout(nextImageTimer);

// And in your mouseout:
nextImageTimer = setTimeout(showNextImage, 1000);