Question

我已经为我的问题创建了 DEMO 。

在我的演示中，您可以看到当您使用鼠标悬停在缩略图图像上时，更大的图片正在发生变化。我想要什么？我想在几秒钟后自动更改图像。

我需要做些什么呢？有人可以帮帮我吗？

$(document).ready(function() {

    $("#magazin_sldwr li img").hover(function(){
        $('#mainm-img').attr('src',$(this).attr('src').replace('thumb/', ''));
    });
    var imgSwap = [];
     $("#magazin_sldwr li img").each(function(){
        imgUrl = this.src.replace('thumb/', '');
        imgSwap.push(imgUrl);
    });
    $(imgSwap).preload();
});
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

Answer 1

使用setInterval()

setInterval(function() {
    //change image
}, 2000);

其中2000是毫秒数。只需进行一次更改即可使用setTimeout()

Answer 2

这是一个开始： demo

我们的想法是在当前图片的父.active上使用li类，然后每2秒触发一次mouseenter事件：

function autoChangeImage() {
    setTimeout(function(){
        $("#magazin_sldwr li.active")
            .removeClass('active')
            .next('li')
            .addClass('active')
            .children('img')
            .trigger('mouseenter');
        autoChangeImage();
    }, 2000);
}

当然，您可能希望在到达最后一个拇指后回到第一个拇指，并在“手动”悬停拇指时clearTimeout： demo

鼠标悬停时Jquery交换图像库

2 个答案: