Question

我有一个网页，可以使用javascript video嵌入文字和视频。我可以使用什么javascript / jquery代码以设定的速度向下滚动页面，停止滚动，播放视频，然后继续滚动直到页面底部重新启动？

编辑：我尝试过http://www.jquerybyexample.net/2013/05/jquery-scroll-page-automatically-by-few-pixels-after-every-few-seconds.html和http://jdsharp.us/jQuery/plugins/AutoScroll/以及http://jsfiddle.net/NaP8D/11/。

//run instantly and then goes after (setTimeout interval)

$("html, body").animate({ scrollTop: $(document).height() }, 4000);
setTimeout(function() {
   $('html, body').animate({scrollTop:0}, 4000); 
},4000);
setInterval(function(){
     // 4000 - it will take 4 secound in total from the top of the page to the bottom
$("html, body").animate({ scrollTop: $(document).height() }, 4000);
setTimeout(function() {
   $('html, body').animate({scrollTop:0}, 4000); 
},4000);

},8000);

我无法让代码暂停其中任何一个。

Answer 1

这应该可以让您大致了解您的需求。如果没有一些HTML代码或更多JS，我无法给出具体的答案。在此，#myVideo是视频的id。

// scrolls to the video
$("html, body").animate({ scrollTop: $("#myVideo").offset().top }, 4000);

// $("#myVideo") should return a video element
var video = $("#myVideo");

// called when the video/playlist ends
video.onended = function() {
     // scrolls to the bottom of the page
     $("html, body").animate({ scrollTop: $(document).height() }, 4000);
};

您需要稍微修改它以匹配您的代码。如果你想循环它：

while(1){
  $("html, body").animate({ scrollTop: $("#myVideo").offset().top }, 4000);
  var video = $("#myVideo");
  video.onended = function() {
    $("html, body").animate({ scrollTop: $(document).height() }, 4000);
    setTimeout(function() {
        $("html, body").animate({ scrollTop: $(0).height() }, 4000);
    },4000);
  };
}

jquery自动滚动，播放视频，重启

1 个答案: