Question

我正在尝试按照教程here构建纯javascript滑块，并进行少量自定义。

我遇到的问题是：如果我添加超过7张幻灯片，则第7张及以后将无法正确显示。仅显示深灰色屏幕而不是我选择的图片。

我尝试了几个小时的调试，但仍无法弄明白。希望有些专家能够对这个问题有所了解。

代码作者的JSFIddle：https://jsfiddle.net/solodev/yokph2nh/

代码片段

function changeSlides(instant) {
    if (!instant) {
        animating = true;
        manageControls();
        $slider.addClass("animating");
        $('#slide-content').addClass("animating");
        $slider.css("top");
        $(".slide").removeClass("active");
        $(".slide-" + curSlide).addClass("active");

        setTimeout(function() {
            $slider.removeClass("animating");
            $('#slide-content').removeClass("animating");
            // Update content
            let currentContent = $(".slide-" + curSlide + " .slide__content").html();
            $('#slide-content').html(currentContent);

            animating = false;
        }, animTime);
    }
    window.clearTimeout(autoSlideTimeout);
    $(".slider-pagi__elem").removeClass("active");
    $(".slider-pagi__elem-" + curSlide).addClass("active");
    $(".slider-tab__elem").removeClass("active");
    $(".slider-tab__elem-" + curSlide).addClass("active");
    $slider.css("transform", "translate3d(" + -curSlide * 100 + "%,0,0)");
    $slideBGs.css("transform", "translate3d(" + curSlide * 50 + "%,0,0)");
    diff = 0;
    autoSlide();
}

Answer 1

这是你发布的一个改变的小提琴，有更多的图像。 https://jsfiddle.net/5xhtq4hL/

似乎工作正常。

也许你没有更新左边的css值 .slide:nthchild()选择器？

这段代码看起来不是很干。这么多的复制粘贴。

纯javascript轮播错误

1 个答案: