Javascript 图像上的缩略图，用于使用滑块更改较大的图片

我有一个关于滑块的问题

我从codepen创建了这个

在这个演示中，你可以看到我有缩略图和一个大图像。当您将鼠标移到拇指图像上时，大图像会发生变化

但我想添加一个自动播放。我的自动播放正在工作，但只对缩略图图像，而不是大图像（它不会改变）。我能做些什么来解决这个问题

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

jQuery（文档）.ready（函数（$）{
函数do_slide（）{
间隔=设置间隔（函数（）{
moveRight（）；
}, 1000);
}
不要滑动（）；
$（'ul li'）。悬停（函数（）{
间隔时间；
});
$（'ul li'）.mouseleave（函数（）{
不要滑动（）；
});
var slideCount=$（“#画廊ul li”）。长度；
var slideWidth=$（'#gallery ul li'）.width（）；
var slideHeight=$（'#gallery ul li'）.height（）；
var sliderUlWidth=slideCount*slideWidth；
$（'#gallery'）.css（{宽度：slideWidth，高度：slideHeight}）；
$（'#gallery ul'）.css（{宽度：sliderUlWidth，marginLeft:-slideWidth}）；
$（'最后一个孩子'）.prependTo（'最后一个孩子'）；
函数moveLeft（）{
$（“#画廊ul”）。动画({
左：+slideWidth
}，100，函数（）{
$（'最后一个孩子'）.prependTo（'最后一个孩子'）；
$（'#gallery ul'）.css（'左'，''）；
});
};
函数moveRight（）{
$（“#画廊ul”）。动画({
左：-滑动方向
}，100，函数（）{
$（“#图库ul li:第一个孩子”）。附录（“#图库ul”）；
$（'#gallery ul'）.css（'左'，''）；
});
};
$（'a.control\u prev'）。单击（函数（）{
左移（）；
});
$（'a.control\u next'）。单击（函数（）{
moveRight（）；
});
});   
$（文档）.ready（函数（）{
$（“#gallery li img”）.hover（函数（）{
$（'#main img'）.attr（'src'，$（this.attr（'src'））.replace（'thumb/'，''）；
});
var imgSwap=[]；
$（“#图库li img”）。每个（函数（）{
imgUrl=this.src.replace（'thumb/'，''）；
imgSwap.push（imgUrl）；
});
$（imgSwap.preload（）；
});
$.fn.preload=函数（）{
这个。每个（函数（）{
$（'如果替换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', '');
    });
};

这将使您的图库图像与缩略图一起移动，如果这是您想要的？
这绝对是我想要的答案。谢谢。很高兴为我给您加分。