首页 > 其他分享 >原生js实现列表内容向上滚动,列表内容向上轮播

原生js实现列表内容向上滚动,列表内容向上轮播

时间:2024-10-22 14:45:36浏览次数:1  
标签:document 滚动 轮播 列表 getElementById 内容 var conbox 向上

<div id="review_box">
     <ul id="conent1">
        <li>第一条内容</li>
        <li>第二条内容</li>
        <li>第三条内容</li>
        <li>第四条内容</li>
        <li>第五条内容</li>
        <li>第六条内容</li>
    </ul>
    <ul id="conent2"></ul>
 </div>
 * {
      margin: 0;
      padding: 0;
  }
div {
     width: 100px;
     height: 60px; /* 必须 */
     overflow: hidden;/* 必须 */
     margin: 50px auto;
     border: 1px solid red;
     text-align: center;
 }
ul {
     list-style: none;
}
function scrollFun(t) {
     var con1 = document.getElementById("conent1");
     var con2 = document.getElementById("conent2");
     var conbox = document.getElementById("review_box");
     con2.innerHTML = con1.innerHTML;
     conbox.scrollTop = 0; // 开始无滚动时设为0
     var timer = setInterval(scrollStart, t); // 设置定时器,参数t用在这为间隔时间(单位毫秒),参数t越小,滚动速度越快
     // 鼠标移进内容区域停止滚动
     conbox.onmouseover = function () {
         clearInterval(timer);
     }
     // 鼠标移出后继续滚动
     conbox.onmouseout = function () {
         timer = setInterval(scrollStart, t);
     }
}
 
// 开始滚动函数
function scrollStart() {
     var con1 = document.getElementById("conent1");
     var con2 = document.getElementById("conent2");
     var conbox = document.getElementById("review_box");
     // 不断给scrollTop的值+1,内容开始滚动,当滚动高度大于列表内容高度时恢复为0
     if (conbox.scrollTop >= con1.scrollHeight) {
         conbox.scrollTop = 0;
     } else {
         conbox.scrollTop++;
     }
}

scrollFun(100);

 

标签:document,滚动,轮播,列表,getElementById,内容,var,conbox,向上
From: https://www.cnblogs.com/srqsl/p/18492692

相关文章

  • iOS Swift 的捕获列表 [weak self] 和 [unowned self]
    捕获列表(capturelist)是Swift中闭包的重要概念之一,用来控制闭包如何捕获和存储其上下文中的外部变量。捕获行为在闭包中使用外部变量时,Swift会自动捕获这些变量的引用。如果这些变量是引用类型(如类实例),闭包会持有它们的强引用,可能导致强引用循环,即内存泄漏。捕获列表允许你......
  • 信息学奥赛复赛复习18-CSP-J2023-01小苹果-向上取整、向下取整、模拟算法
    PDF文档公众号回复关键字:202410211P9748[CSP-J2023]小苹果[题目描述]小Y的桌子上放着n个苹果从左到右排成一列,编号为从1到n。小苞是小Y的好朋友,每天她都会从中拿走一些苹果。每天在拿的时候,小苞都是从左侧第1个苹果开始、每隔2个苹果拿走1个苹果。随......
  • Java列表list
    List列表创建列表//List的ArrayList实现List<String>list1=newArrayList<>();//List的LinkedList实现List<String>list2=newLinkedList<>();常用方法importjava.util.List;importjava.util.LinkedList;classMain{publicstatic......
  • Go--获取redis/parker集群的客户端列表信息
    下载依赖:goget-ugithub.com/go-redis/redis 文件代码:packagemainimport("context""fmt""log""strings""time""github.com/go-redis/redis/v8")funcmain(){//......
  • el-table轮播
    <el-tableref="reportTable":data="tableData"stripestyle="width:98%;margin:0auto;"><!--<el-table-columnprop="rank"label="排名"align="center"></el-......
  • Java面向对象之多态,向上转型我们大家庭的由来
    各位看官早安午安晚安呀如果您觉得这篇文章对您有帮助的话欢迎您一键三连,小编尽全力做到更好欢迎您分享给更多人哦大家好我们今天来学习Java面向对象的三大特性之一的继承,我们大家庭就要来啦~一:多态的概念多态的概念:通俗来说,就是多种形态,具体点就是去完成某个行为,当......
  • pbootcms调取友情连接列表代码
    适用范围全站任意地方均可使用标签作用用于依次输出指定分组的友情链接模板代码{pboot:linkgid=*num=*}<ahref="[link:link]"title="[link:name]"><imgsrc="[link:logo]"></a>{/pboot:link}控制参数gid=*:分组,必填,用于控制需要输出的友情链接分组。num=......
  • 无缝轮播图
    ```html<template> <!--@touchend="handleTouchEnd"--> <!--@touchstart="handleTouchStart"--> <divclass="carousel-conainer">  <div   class="carousel-list"   :style=&quo......
  • 微信小程序 触底加载更新 虚拟列表渲染
    <wxsmodule='filter'>varincludesList=function(list,currentIndex){if(list){returnlist.indexOf(currentIndex)>-1}}module.exports.includesList=includesList;</wxs><scroll-viewstyle='......
  • 网站后台修改首页轮播图?
    登录后台管理系统打开浏览器,输入后台管理系统的地址。输入用户名和密码进行登录。进入轮播图管理页面登录后,找到并点击“内容管理”或类似名称的菜单。在子菜单中选择“轮播图管理”或“首页轮播图”。编辑现有轮播图在轮播图列表中,找到需要修改的轮播图。点击......