元素的自动垂直滚动

Question

我正在尝试使用jQuery使元素自动滚动。到目前为止，这是我的代码：

jQuery(document).ready(function($) {

    jQuery( '.device_screenshot' ).each(function(){

        y = jQuery(this);

        var times;
        var moveInter;
        var backInter;
        function moveBack(){
            clearInterval(moveInter);
            backInter = setInterval(function(){
                times -= 5;
                y.scrollTop(times);
                if(times == 0){
                    return startMove();
                }
            }, 1);
        }
        function move(){
            moveInter = setInterval(function(){
                times++;
                y.scrollTop(times);
                if(times == 1200){
                    return moveBack();
                }
            }, 5);
        }
        function startMove(){
            times = 0;
            if(backInter != null){
                clearInterval(backInter);
            }
            window.setTimeout(function(){
                move();
            }, 2000);
        }
        startMove();        

    });

});

此代码使得带有“device_screenshot”类的最后一个元素滚动，但之前没有。为什么呢？

以防万一这是HTML。这是WordPress所以它中有一些与WP相关的插件PHP函数：

<h2><?php the_field( $tablo[$i][0] ); ?></h2>
<?php   
if ( get_field( $tablo[$i][2] ) ) {
    ?>  
        <div class='desktop_wrap'>
            <div class='desktop'>               
                <div class='desktop_caption'>
                    <div class='caption_inner'>
                        <?php if ( get_field( $tablo[$i][1] ) ) { ?>
                            <div class='screenshot_text'>
                                <h3>DESKTOP (960px)</h3>
                                <?php the_field( $tablo[$i][1] ); ?>
                            </div>
                        <?php }?>
                    </div>
                </div>
                <div class='desktop_screenshot device_screenshot'><img class='img_p' alt='' src="<?php the_field( $tablo[$i][2] ); ?>" /></div>                 
            </div>
        </div>
<?php
}   
if ( get_field( $tablo[$i][4] ) ) {
    ?>
        <div class='phone_wrap'>
            <div class='phone'>                 
                <div class='phone_caption'>
                    <div class='caption_inner'>
                        <?php if ( get_field( $tablo[$i][3] ) ) { ?>
                            <div class='screenshot_text'>
                                <h3>PHONE (320px)</h3>
                                <?php the_field( $tablo[$i][3] ); ?>
                            </div>
                        <?php }?>
                    </div>
                </div>
                <div id='phone_screenshot' class='phone_screenshot device_screenshot'><img class='img_p' alt='' src="<?php the_field( $tablo[$i][4] ); ?>" /></div>                 
            </div>
        </div>
<?php
}
if ( get_field( $tablo[$i][6] ) ) {
    ?>
        <div class='tablet_wrap'>
            <div class='tablet'>                        
                <div class='tablet_caption'>
                    <div class='caption_inner'>
                        <?php if ( get_field( $tablo[$i][5] ) ) { ?>
                            <div class='screenshot_text'>
                                <h3>IPAD (768px)</h3>
                                <?php the_field( $tablo[$i][5] ); ?>
                            </div>
                        <?php }?>
                    </div>
                </div>
                <div class='tablet_screenshot device_screenshot'><img class='img_p' alt='' src="<?php the_field( $tablo[$i][6] ); ?>" /></div>                      
            </div>
        </div>
<?php
}
?>

Answer 1

这可能不是主要问题，但我想您可能想要更改这些行：

y.scrollTop = times;

到

y.scrollTop(times);

DEMO： http://jsfiddle.net/t6xj8/16/

.scrollTop()的文件在这里：
http://api.jquery.com/scrolltop/

<小时/> 修改 您的代码可能如下所示：

DEMO： http://jsfiddle.net/t6xj8/16/

function Scroller(y){

    this.times = 0;
    this.moveInter = 0;
    this.backInter = 0;

    this.moveBack = function () {
        var self = this;
        clearInterval(this.moveInter);
        this.backInter = setInterval(function () {
            self.times -= 5;
            y.scrollTop(self.times);
            if (self.times == 0) {
                return self.startMove();
            }
        }, 1);
    }

    this.move = function() {
        var self = this;
        this.moveInter = setInterval(function () {
            self.times++;
            y.scrollTop(self.times);
            if (self.times == 1200) {
                return self.moveBack();
            }
        }, 5);
    }

    this.startMove = function() {
        this.times = 0;
        var self = this;
        if (this.backInter != null) {
            clearInterval(this.backInter);
        }
        window.setTimeout(function () {
            self.move();
        }, 2000);
    }
}
jQuery('.device_screenshot').each(function () {

    y = jQuery(this);
    var scroller = new Scroller(y);
    scroller.startMove();

});

希望这有帮助。