移动/自我克隆轮播 - 滚动中断重复克隆/帮助在滚动后复制

Question

旋转木马不断移动和克隆。当鼠标悬停/滚动时，它会删除红色标记块之前的每个蓝色块。红色标记的块是参考点;当红色标记的块切换时，它刚刚打开的前一个块是克隆并附加到轮播底部的块。

当我滚动鼠标以使其到达我的旋转木马的终点时，鼠标移动旋转木马;它应该在旋转木马的末尾添加重复的幻灯片。相反，它在蓝色块下面有一个间隙。我试图这样做，所以没有差距出现。我不确定如何在用户到达旋转木马底部后鼠标移动旋转木马时立即克隆正确的那个。

当我向上滚动到旋转木马的开头并将鼠标移动到旋转木马时，红色标记框会提前切换到它;我试图做到这一点，当红色框被灰色向上箭头框100％覆盖时，它会切换到下一个向下，循环重复（就像旋转木马首次启动时的开始）。唯一不同的是，在我滚动它之后，我需要正确地发生这种情况。

我试过切换＆＃34;标记＆＃34;因此，无论何时滚动，任何蓝色块的偏移顶部位置都在35之间（考虑到顶部灰色框的高度）和蓝色块的负高度加上35，那将是新的标记;然后当您使用新标记鼠标移动旋转木马时，创建新克隆而不会看到切断的旋转木马内容。我无法做到这一点。

订单并不重要，只要在滚动时唯一的六个是那里。

对于JSFiddle，我试图调整窗口的Result部分的大小，因此只有四个块适合复制问题。代码应该缩放内容，所以一次只能出现四个;但我在JSFiddle上遇到了一些麻烦。您可以调整“结果”窗格的大小以适合四个块以更好地模拟问题。

对于JSFiddle中的JavaScript代码，跳到第223行。该行之上的所有内容都是jquery.mousewheel.js代码，可以忽略。抱歉，我目前无法在https地址下托管文件。

http://jsfiddle.net/5e77r2fw/99/

HTML

<div id="column">
    <div class="up">
        <img src="./resources/images/up.png" alt="up arrow" />
    </div>
    <!-- Carousel -->
    <div id="carousel">
        <div class="carouselunit one">
            <div class="flipcard">
                <img class="bg-for-text" src="http://bellatortravel.com/images/g1.jpg"/>
                <div class="backpane"></div>
            </div>
        </div>
        <div class="carouselunit two">
            <div class="flipcard">
                <img class="bg-for-text"  src="http://bellatortravel.com/images/g2.jpg"/>
                <div class="backpane"></div>
            </div>
        </div>
        <div class="carouselunit three">
            <div class="flipcard">
                <img class="bg-for-text"  src="http://bellatortravel.com/images/g3.jpg"/>
                <div class="backpane"></div>
            </div>
        </div>
        <div class="carouselunit four">
            <div class="flipcard">
                <img class="bg-for-text"  src="http://bellatortravel.com/images/g4.jpg"/>
                <div class="backpane"></div>
            </div>
        </div>
        <div class="carouselunit five">
            <div class="flipcard">
                <img class="bg-for-text"  src="http://bellatortravel.com/images/g5.jpg"/>
                <div class="backpane"></div>
            </div>
        </div>
        <div class="carouselunit six">
            <div class="flipcard">
                <img class="bg-for-text"  src="http://bellatortravel.com/images/g6.jpg"/>
                <div class="backpane"></div>
            </div>
        </div>
    </div>
    <div class="down">
        <img src="./resources/images/down.png" alt="down arrow" />
    </div>
    <div class="background"></div>
</div>

CSS

body {
    width: 100%;
    height:100%;
}
div#column {
    top:0px;
    bottom: 0px;
    position: absolute;
    border: 1px solid greenyellow;
    display: block;
    overflow: hidden;
    left: 16.55%;
}
.flipcard span {
    position: absolute;
    font-size: 3em;
    z-index: 3;
}
#carousel {
    border: 1px solid cyan;
    position: relative;
    top: 0px;
    padding:0px;
    background: #000;
    padding: 35px 0px 35px 0px;
}
#carousel .carouselunit {
    display: block;
    border: 1px solid white;
    width: auto;
}
.carouselunit.one, .carouselunit.two, .carouselunit.three, .carouselunit.four, .carouselunit.five, .carouselunit.six {
    background-color: blue;
    background-size: 100% 100%;
}
#carousel .carouselunit.marker {
    border: 3px solid red;
}
#carousel .carouselunit .flipcard {
    border: 0px dashed pink;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    color: white;
}
#carousel > .carouselunit > .flipcard > img.bg-for-text {
    top: 0px;
    left: 0px;
    border: 1px solid yellow;
    transform: translateZ(1px);
    -ms-transform: translateZ(1px);
    -o-transform: translateZ(1px);
    -webkit-transform: translateZ(1px);
    z-index: 1;
    width: 100%;
    font-size: 4em;
    height: 80px;
}
div.up {
    position: absolute;
    width: 100%;
    top: 0px;
    height: 35px;
    z-index: 2;
    background: gray;
    text-align: center;
}
div.up:hover {
    background: teal;
}
div.down {
    position: absolute;
    width: 100%;
    bottom: 0px;
    height: 35px;
    z-index: 1;
    background: gray;
    text-align: center;
}
div.down:hover {
    background: teal;
}

的JavaScript

var imageHeight = ($("#column").height() - 70) / 4;
var imageWidth = imageHeight * 2.3360655737704918032786885245902;
$("#column").width(imageWidth);
var scrollDifference = $("#carousel").height() - $("#column").height();
var movedOn = false;
var incrementPixel = 0;
var c = 6;
var moveCarousel;
$("#carousel > .carouselunit:first-child").addClass("marker");

if (!movedOn) {
    moveCarousel = setInterval(repeatedFunction, 20);
}

function repeatedFunction() {
    if ((!movedOn)) {
        $("#carousel").css({
            top: "-=1"
        });
        console.log("Carousel Height: " + $("#carousel").height());
        console.log("Scroll Difference: " + ($("#carousel").height() - $("#column").height()));
        console.log("Carousel Top Movement: " + $("#carousel").offset().top);
        incrementPixel++;
        console.log("Marker Position: " + $(".marker").offset().top);
        console.log($("#carousel").height() / c);
        if (incrementPixel >= $("#carousel").height() / c) {
            incrementPixel = 0;
            c++;
            $(".marker").clone(true, true).insertAfter("#carousel > .carouselunit:last-child").removeClass("marker");
            $(".marker").removeClass("marker").next(".carouselunit").addClass("marker");
            console.log("Carousel Position After Cloning Whatever is Marker: " + $("#carousel").offset().top);
            console.log("Moving Marker Down - Marker Position After Cloning New One: " + $(".marker").offset().top);
            console.log("Scroll Difference: " + scrollDifference);
        }
    }
}

//MOUSE WHEEL EVENT
$("#carousel").on('mousewheel', function (event) {
    scrollDifference = $("#carousel").height() - $("#column").height();
    var scrollIncrement = $("#carousel").height() / (6 * 3);
    if (!movedOn) {
        clearInterval(moveCarousel);
        var positionOfNewFirstImage = $(".marker").offset().top;
        $(".marker").prevAll().remove();
        c = 6;
        $("#carousel").css({
            top: positionOfNewFirstImage - 35
        });
        movedOn = true;
    }
    if (event.deltaY > 0) {//SCROLL UP
        if ((scrollDifference > 0) && ($("#carousel").offset().top < 0)) {
            if ($("#carousel").offset().top + scrollIncrement > 0) {
                var difference = $("#carousel").offset().top + scrollIncrement;
                $(this).css({
                    top: "+=" + (scrollIncrement - difference)
                }, 80);
                if ($(".flipcard.nonselectedhover")) {
                    $(".flipcard.nonselectedhover").css({
                        top: "+=" + (scrollIncrement - difference)
                    });
                }
            } else {
                $(this).css({
                    top: "+=" + scrollIncrement
                }, 80);
                console.log("Position of carousel after scroll: " + $("#carousel").offset().top);
                if ($(".flipcard.nonselectedhover")) {
                    $(".flipcard.nonselectedhover").css({
                        top: "+=" + scrollIncrement
                    });
                }
            }
        }

    }
    else if (event.deltaY < 0) {//SCROLL DOWN
        if ((scrollDifference > 0) && ($("#carousel").offset().top > -scrollDifference - 70)) {

            if ($("#carousel").offset().top - scrollIncrement < -scrollDifference - 70) {
                var differenceDown = Math.abs(scrollDifference + 70 + ($("#carousel").offset().top - scrollIncrement));
                $(this).css({
                    top: "-=" + (scrollIncrement - differenceDown)
                }, 80);
                console.log("Going up " + (scrollIncrement - differenceDown) + " pixels.");
                console.log("carousel going up with modified increment");
                console.log("Position of carousel after scroll: " + $("#carousel").offset().top);
                if ($(".flipcard.nonselectedhover")) {
                    $(".flipcard.nonselectedhover").css({
                        top: "-=" + (scrollIncrement - differenceDown)
                    });
                }
            }
            else {
                $(this).css({
                    top: "-=" + scrollIncrement
                }, 80);
                console.log("Going up " + scrollIncrement + " pixels.");
                console.log("carousel going up with regular increment");
                console.log("Position of carousel after scroll: " + $("#carousel").offset().top);
                if ($(".flipcard.nonselectedhover")) {
                    $(".flipcard.nonselectedhover").css({
                        top: "-=" + scrollIncrement
                    });
                }
            }
        }
    }
});

$("#carousel").mouseenter(function () {
    if (!$(this).children(".carouselunit").children(".flipcard").hasClass("selected")) {
        if (!movedOn) {
            clearInterval(moveCarousel);
            var positionOfNewFirstImage = $(".marker").offset().top;
            console.log("Mouse enter carousel to stop it");
            console.log("Position of new first image, Marker: " + positionOfNewFirstImage);
            $(".marker").prevAll().remove();
            c = 6;
            $("#carousel").css({
                top: positionOfNewFirstImage - 35
            });
            movedOn = true;
        }
    }
});

$("#carousel").mouseleave(function () {
    movedOn = false;
    if (!$(this).children(".carouselunit").children(".flipcard").hasClass("selected")) {
        if (!movedOn) {
            moveCarousel = setInterval(repeatedFunction, 20);
        }
    }
});