Question

我有一个关于滑块的问题。

我从codepen创建了这个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', '');
    });
};

这会让你的画廊图片随着缩略图一起移动，如果你正在寻找它？

图像上的缩略图，用于更大的图片随滑块而变化

1 个答案: