Изображения, setInterval и Mouseover - PullRequest
Новая
       0

Изображения, setInterval и Mouseover

0 голосов
/ 12 октября 2011

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

Как только указатель мыши перемещается по изображению, я хочу приостановить выполнение сценария (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();

});

1 Ответ

2 голосов
/ 12 октября 2011

Я бы не использовал setInterval() для этого. Вместо этого используйте setTimeout() с функцией, которая после перехода к следующему изображению, которое будет отображаться, запустит еще один 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);
...