javascript - 图像上的缩略图可通过 slider 更改更大的图片

Question

我有一个关于我的 slider 的问题。

我创建了这个DEMO来自代码笔。

在此演示中，您可以看到我有缩略图和大图像。当您将鼠标悬停在缩略图上时，大图像就会发生变化。

但我想添加自动播放。我的自动播放功能正常，但仅适用于缩略图，而不适用于大图像(它不会改变)。我可以做什么来解决这个问题？

jQuery(document).ready(function ($) {

function do_slide(){
    interval = setInterval(function(){
      moveRight();
    }, 1000);
  }
  do_slide();
   $('ul li').hover(function(){
       clearInterval(interval);
     });
      $('ul li').mouseleave(function(){
       do_slide();
     });

    var slideCount = $('#gallery ul li').length;
    var slideWidth = $('#gallery ul li').width();
    var slideHeight = $('#gallery ul li').height();
    var sliderUlWidth = slideCount * slideWidth;


    $('#gallery').css({ width: slideWidth, height: slideHeight });

    $('#gallery ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

    $('#gallery ul li:last-child').prependTo('#gallery ul');

    function moveLeft() {
        $('#gallery ul').animate({
            left: + slideWidth
        }, 100, function () {
            $('#gallery ul li:last-child').prependTo('#gallery ul');
            $('#gallery ul').css('left', '');
        });
    };

    function moveRight() {
        $('#gallery ul').animate({
            left: - slideWidth
        }, 100, function () {
            $('#gallery ul li:first-child').appendTo('#gallery ul');
            $('#gallery ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

});   
$(document).ready(function() {
    $("#gallery li img").hover(function(){
        $('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
    });
    var imgSwap = [];
     $("#gallery 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

如果您替换 moveRight 函数:

function moveRight() {
    $('#gallery ul').animate({
        left: - slideWidth
    }, 100, function () {
        $('#gallery ul li:first-child').appendTo('#gallery ul');
        $('#gallery ul').css('left', '');
    });
};

与:

function moveRight() {
    $('#gallery ul').animate({
        left: - slideWidth
    }, 100, function () {
        var child = $('#gallery ul li:first-child');
        $('#main-img').attr('src', $('img', child.next()).attr('src').replace('thumb/', ''));
        child.appendTo('#gallery ul');
        $('#gallery ul').css('left', '');
    });
};

如果您正在寻找的话，这将使您的图库图像随缩略图一起移动？