Question

我的脚本循环显示有问题。

鼠标指针在图像上移动后，我想暂停脚本（InfinityLoop）。当鼠标离开图像时，脚本应该继续。

我几天都在努力，但没有让它运行： - /

感谢您的大力帮助！

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();

});

Answer 1

我不会使用setInterval()。相反，请使用setTimeout()函数，该函数在交换到要显示的下一个图像后，将启动另一个setTimeout()。然后，您可以通过调用clearTimeout()调用返回的ID上的setTimeout()来实现所需的鼠标悬停功能，然后在mouseout上再次调用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);

图像，setInterval和Mouseover

1 个答案: