javascript - 创建一个jQuery垂直滚动循环

我正在尝试编写一个jQuery脚本，该脚本将在其<p>父级中不断滚动这些<div>标记。我是从this site得到这个想法的。

function shuffle(){

    $('#wrapper > p').each(function(){
        h = ($(this).offset().top + 130);
        if( h > 500 ){
            console.log(h);
            $(this).css ('top', 0 );
            return;
        }

        if( h == 270 ){
            $(this).addClass('current' );
        }

        if( h == 360 ){
            $(this).removeClass('current' );
        }

        $(this).animate({
            top: h,
            easing: 'easeIn'
        }, 500, '');

        if( h > 1350 ){
            $(this).css ('top', 0 );
        }
    });

    window.setTimeout(shuffle, 2500);
}

var i = 0;

$('#wrapper > p').each(function(){
    starter = $(this).css('top', ((i * 90) ) + 'px' );
    starterWhite = ($(this).offset().top + 130);
    if((i*90) == 270)
        $(this).addClass('current');
    $(this).css('top', starter );
    i++;
});

window.setTimeout(shuffle, 2000);

#wrapper {
    height: 500px;
    overflow: hidden;
    position: relative;
}

p {
    position: absolute;
    margin: 0;
    padding: 0;
}

.current {
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
</div>

问题是，当我尝试使其滚动时，<p>标签重叠，并且突出显示的标签没有变化。任何想法如何使其工作？到目前为止我所获得的。

最佳答案

checkout this:

// Constants, you can play with it
var STEP = 90;
var CURRENT_INDEX = 3;

// Variables for calculating
var currentTop = STEP * CURRENT_INDEX;
var nextForCurrentTop = STEP * (CURRENT_INDEX + 1);
var $numbers = $('#wrapper > p');
// In this case = 7
var count = $numbers.length;
var secondToLastTop = STEP * (count - 1);

$numbers.each(function(i) {
    var $this = $(this);
    $this.css('top', i * STEP + 'px');

    if (i === CURRENT_INDEX) {
        $this.addClass('current');
    }
});

window.setTimeout(shuffle, 2000);

function shuffle() {
    $numbers.each(function() {
        $this = $(this);
        // Calculating the new position of the element
        h = parseInt($this.css('top')) + STEP;

        // In this case = 540
        if (h > secondToLastTop) {
            $this.css('top', 0);
            return;
        }

        // In this case visually = 3rd element
        if (h === currentTop) {
            $this.addClass('current');
        }

        // In this case visually = 4th element
        if (h === nextForCurrentTop) {
            $this.removeClass('current');
        }

        $this.animate({
            top: h,
            easing: 'easeIn'
        }, 500, '');
    });

    window.setTimeout(shuffle, 2500);
}

#wrapper {
    height: 500px;
    overflow: hidden;
    position: relative;
}

p {
    position: absolute;
    margin: 0;
    padding: 0;
}

.current {
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
</div>

我从您的示例中改进并注释了代码，删除了幻数。您可以使用常量。

关于javascript - 创建一个jQuery垂直滚动循环，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31230626/