js实现列表自动滚动循环播放

本文实例为大家分享了js实现列表自动滚动循环播放的具体代码，供大家参考，具体内容如下

1.实现效果图

鼠标移入，暂停滚动； 鼠标移出，继续滚动；

2.原理

  • 要实现无缝衔接，在原有ul后面还要有一个一样内容的ul；
  • 最外层div为可视区域，设overflow：hidden；
  • 2个ul的高度 > 外层可视div高度，才能滚动；

3.实现代码

html：

<!-- vue -->
<div id="review_box" @mouseover="rollStop()" @mouseout="rollStart(60)">
    <ul id="comment1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul id="comment2"></ul>
</div>

css:

div {
    height: 100px; /* 必须 */
    overflow: hidden;/* 必须 */
}

js:

//vue data
data (){
    return {
        timer: null,
    }
},
mounted() {
      this.roll(60);
},
beforeDestroy() {
      if (this.timer) clearInterval(this.timer);
},
//vue methods
roll(t) {
    var ul1 = document.getElementById("comment1");
    var ul2 = document.getElementById("comment2");
    var ulbox = document.getElementById("review_box");
    ul2.innerHTML = ul1.innerHTML;
    ulbox.scrollTop = 0;
    this.rollStart(t);
},
rollStart(t) {
    var ul1 = document.getElementById("comment1");
    var ul2 = document.getElementById("comment2");
    var ulbox = document.getElementById("review_box");
    this.rollStop();
    this.timer = setInterval(()=>{
        // 当滚动高度大于列表内容高度时恢复为0
        if (ulbox.scrollTop >= ul1.scrollHeight) {
            ulbox.scrollTop = 0;
        } else {
            ulbox.scrollTop++;
        }
    }, t);
},
rollStop(){
    clearInterval(this.timer);
},

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 如何使用JavaScript实现无缝滚动自动播放轮播图效果

    在一些项目开发中,我们经常需要使用到轮播图,但是没有深入学习的情况下做轮播图是非常困难的. 思路 分成小问题来解决 1. 动态生成序号12345 页面有多少li(图片),就有多少序号 2. 点击序号.显示高亮.切换图片 2.1 给序号注册onclick事件 2.2 取消其他序号高亮显示,让当前点击的序号高亮显示 2.3 点击序号,动画的方式切换到当前点击的图片位置(设置自定义属性,记录当前索引,有了索引就可用动画进行移动) 3. 鼠标放到盒子上的时候显示左右箭头,移开时候隐藏 onmouseen

  • vue+video.js实现视频播放列表

    本文实例为大家分享了vue + element ui实现锚点定位的具体代码,供大家参考,具体内容如下 1.引入Video.js npm install --save-dev video.js 然后在main.js中引用 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$videos = Video 引用完成后我们就可以做视频列表了 2.在页面中 使用 method中定义初始方法 init

  • javascript+html5实现仿flash滚动播放图片的方法

    本文实例讲述了javascript+html5实现仿flash滚动播放图片的方法.分享给大家供大家参考.具体如下: html部分: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="move.js" type="text/jav

  • 基于JavaScript怎么实现让歌词滚动播放

    基于JavaScript怎么实现让歌词滚动播放

    各种音乐播放器上都有一个自动滚动播放歌词的功能,当前滚动到的歌词会高亮居中显示,即使歌词被换行也能正常居中,那么这个功能基于JavaScript怎么实现让歌词滚动播放呢?请看下文详解. 一般音乐播放器使用的歌词格式都是lrc,为了方便处理,我们这里使用XML格式的歌词.介绍一个网站:中文歌词库.它提供xml格式的歌词. 我们先来看一下这个例子的最终效果: 下面是基于jQuery的具体代码: <!DOCTYPE html> <html lang="en"> <

  • JavaScript实现带播放列表的音乐播放器实例分享

    代码较最基础的播放器实现增加了playlist,使用MakeList实现多首播放,有需要的可以直接使用: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • 基于JavaScript实现新增内容滚动播放效果附完整代码

    基于JavaScript实现新增内容滚动播放效果附完整代码

    先给大家展示下效果图: 完整demo如下 每两秒随机向上或者向下滚动,如果要替换新内容,则通过html()更新内容即可(查看注释代码) <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content=&q

  • JS幻灯片可循环播放可平滑旋转带滚动导航(自写)

    JS幻灯片可循环播放可平滑旋转带滚动导航(自写)

    最近在帮别人改一些东西,在网上找了好久,但是没有相同的,自己改了下,拿出来分享下: 先展示下效果把:  index.html 页面展示代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:

  • javascript实现图片循环渐显播放的方法

    本文实例讲述了javascript实现图片循环渐显播放的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>图片的循环渐显播放效果代码</title> <head> <!--1.将下面的代码插入到HEML的<head></head>之间: --> <script language=javaScript> <!--// sandra0 = new Image()

  • js实现列表自动滚动循环播放

    js实现列表自动滚动循环播放

    本文实例为大家分享了js实现列表自动滚动循环播放的具体代码,供大家参考,具体内容如下 1.实现效果图 鼠标移入,暂停滚动: 鼠标移出,继续滚动: 2.原理 要实现无缝衔接,在原有ul后面还要有一个一样内容的ul: 最外层div为可视区域,设overflow:hidden: 2个ul的高度 > 外层可视div高度,才能滚动: 3.实现代码 html: <!-- vue --> <div id="review_box" @mouseover="rollSt

  • jQuery实现列表自动滚动循环滚动展示新闻

    jQuery实现列表自动滚动循环滚动展示新闻

    需要在页面中一个小的区域循环滚动展示新闻(公告.活动.图片等等),并且,鼠标悬停时停止滚动并提示,离开后,继续滚动. 效果图: 上干货 html: 复制代码 代码如下: <div id="news"> <ul> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofol

  • JS实现的新闻列表自动滚动效果示例

    JS实现的新闻列表自动滚动效果示例

    本文实例讲述了JS实现的新闻列表自动滚动效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #box{width:260px;height:100px;margi

  • js实现滚动条自动滚动

    本文实例为大家分享了js实现滚动条自动滚动的具体代码,供大家参考,具体内容如下 效果类似于直播网站的评论,会一条接着一条向上 go out : js部分很简单:通过控制scrollTop的值来实现自动滚动效果: 很重要两点:    1.scrollTop的值不可以加单位,谨记! 2.网页缩放比例会影响效果实现(下面具体说): scrollTop需要注意的三点: 1.如果这个元素没有被溢出,scrollTop为0: 2.设置的scrollTop值小于0,则scrollTop的值为0 3.如果设置s

  • js实现公告自动滚动

    js实现公告自动滚动

    本文实例为大家分享了js实现公告自动滚动的具体代码,供大家参考,具体内容如下 html <div class="test003">           <div class="test004">             <div class="testTop"><span class="span1">姓名</span>                <span

  • Android 使用ViewPager自动滚动循环轮播效果

    Android 使用ViewPager自动滚动循环轮播效果

    对Android 利用ViewPager实现图片可以左右循环滑动效果,感兴趣的朋友可以直接点击查看内容详情. 主要介绍如何实现ViewPager自动播放,循环滚动的效果及使用.顺便解决ViewPager嵌套(ViewPager inside ViewPager)影响触摸滑动及ViewPager滑动速度设置问题. 先给大家展示下效果图,喜欢的朋友可以下载源码: 1.实现 没有通过ScheduledExecutorService或Timer定期执行某个任务实现,而是简单的通过handler发送消息去

  • js实现文字列表无缝滚动效果

    本文实例为大家分享了js文字列表无缝滚动的具体代码,供大家参考,具体内容如下 HTML代码: <div id="rule"> <div class="list" id="list"> <p>用户185****0000 获得XXX优惠券</p> <p>用户185****0000 获得XXX优惠券</p> <p>用户185****0000 获得XXX优惠券</p

  • 原生JS实现列表内容自动向上滚动效果

    原生JS实现列表内容自动向上滚动效果

    效果展示 (鼠标移入,滚动停止:鼠标移出,滚动继续) 实现原理 1. html结构:核心是ul > li,ul外层包裹着div.因为想要内容循环滚动无缝衔接,所以在原有ul后面还要有一个一样内容的ul.如下图:    (红色边框为可视区域div,此处为了方便查看效果去除overflow:hidden:) 2. 样式方面:由于要滚动,所以必须2个ul的高度 > 外层可视div高度,且div必须设置overflow:hidden; 代码实现 HTML: <div id="revie

  • js实现Select列表内容自动滚动效果代码

    js实现Select列表内容自动滚动效果代码

    本文实例讲述了js实现Select列表内容自动滚动效果.分享给大家供大家参考.具体如下: 这里演示的Select列表内容自动滚动效果,文字可自动滚屏,当网页加载完毕后,Select中的内容会一个接一个向上滚动,当然,滚动的参数和速度是可以调节的.或许你会用得上. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-font-scroll-codes/ 具体代码如下: <html> <head> <title&g

  • iOS实现自动循环播放的banner实例详解

    前言 对于banner轮播图,相信大家都会经常用到.自动循环播放的banner是很常见的UI组件.如何实现呢?下面就来给大家详细介绍下,话不多说了,下面来一起学习学习吧. 1.实现思路 1.横向滚动的banner. UIScrollViw+UIImageView. UICollectionView+UICollectionViewCell. 前者需要自己做重用UIImageView,后者可以直接重用UICollectionViewCell.如果前者没有做重用,多占用内存. 2.自动循环播放ban

随机推荐