js实现列表循环滚动

本文实例为大家分享了js实现文字无缝轮播的具体代码，供大家参考，具体内容如下

先介绍几个属性

  • clientHeight 元素的高度
  • clientTop 元素顶部边框的宽度
  • scrollTop 滚动条遮挡的部分的高度（包含border）
  • scrollHeight 整个内容的高度（包含border）
  • offsetTop 距离上一个 position 不为 static(默认) 的元素的顶部内边框的距离
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>列表循环滚动</title>
</head>
<style>
    html,
    body {
        height: 100%;
        width: 100%;
        overflow: hidden;
        background-color: #999;
    }

    .parent {
        width: 728px;
        margin: 200px auto;
        height: 200px;
        overflow: hidden;
        background-color: #fff;
    }
</style>

<body>
    <div id="parent" class="parent">
        <table border="1" cellpadding="18" cellspacing="0" id="child" class="child">
        </table>
        <div id="cloneChild" class="child"></div>
    </div>
    <script type="text/javascript">

        let parent = document.getElementById('parent');
        let child = document.getElementById('child');

        let str = '';
        for (let i = 0; i < 10; i++) {
            str += `<tr>`;
            for (let j = 0; j < 6; j++) {
                str += `<td>第${i}行第${j}列</td>`;
            }
            str += `</tr>`
        }

        child.innerHTML = str;
        let cloneChild = document.getElementById('cloneChild');
        // 深度克隆一份表格 相比 innerHTML 的优势在于可以克隆元素的全部的属性
        let cloneNoe = child.cloneNode(true);
        // 追加到 parent 里面 做无缝切换视觉效果
        parent.appendChild(cloneNoe);

        (function () {
            setInterval(function () {
                // parent.scrollTop + parent.clientHeight = child.scrollHeight;
                // child.scrollHeight - parent.scrollTop = parent.clientHeight;
                // 让他多滚动 parent 一显示区域的高度。再跳到 最顶部 ，正好 给人一种在不断滚动的错觉
                if (parent.scrollTop >= child.scrollHeight) {
                    parent.scrollTop = 0;
                } else {
                    parent.scrollTop++;
                }
            }, 20);
        })()

    </script>
</body>

</html>

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

赞 (0)

相关推荐

  • js实现无缝轮播图插件封装

    前言:页面中轮播图,对于一个前端开发者来说,是最基本的技能,不论是的商城网站,还是企业站,轮播图已经成为不可缺少的一个模块,而常见的轮播图不外乎两种,一种是渐隐渐现轮播图,一种是无缝轮播图.网上关于轮播图的件也有很多,但是用人家的代码总会出现各种各样的bug,我们修改bug往往要耗费很多时间,而且有些插件的效果还不符合我们的需求,那么我们该如何封装一个自己的轮播插件呢?这就是我们今天的任务,封装轮播插件. 1.特效离不开合理的页面布局,所以我们首先需要进行页面布局: HTML代码: <div c

  • js实现无缝轮播图特效

    用原生js实现无缝轮播图,供大家参考,具体内容如下 index.js: var config = { imgWidth:380,//图片尺寸 dotWidth:8,//小圆点尺寸 doms:{ divImgs:document.querySelector('.imgs'), divDots:document.querySelector('.circle'), divDirection:document.querySelector('.direction'), divContainer:docum

  • js实现无缝轮播图效果

    本文实例为大家分享了js实现无缝轮播图的具体代码,供大家参考,具体内容如下 //Utils.js //封装 预加载图片 var Utils=(function () { return { //SSS loadImg:function (srcList,callBack) {//图片地址 回调函数 var img=new Image(); img.num=0;//初始化num为0 图片数 img.imgList=[];//存放图片 img.srcList=srcList; img.callBack

  • 原生js实现无缝轮播图

    原生js实现无缝轮播图

    本文实例为大家分享了js实现无缝轮播图的具体代码,供大家参考,具体内容如下 先上效果图 原理图 如图可见,是页面按顺序依次显示5张图片,包裹这五张图片的外层的盒子,我们叫ul,通过向左或右移动不同距离,实现在视图中显示的不同的图片,实现轮播,而同时下面的分页小球需要根据当前显示的内容进行点亮: 而无缝轮播图需要在第五张图片后面再加上第一张图片,这样通过右侧箭头,向右切换,当页面切换到第六张时,也就是最后一张图片,此时需要将ul的位置设置为第一张图的位置,然后从第一张图片滑动到第二张,形成一个无缝

  • js实现无缝轮播图

    本文实例为大家分享了js实现轮播图的具体代码,供大家参考,具体内容如下 CSS样式: <style type="text/css"> #box{width: 1000px;height: 375px;border: 3px solid black; margin: 30px auto;position: relative;overflow: hidden;} #box .img{position: absolute;left: 0;top: 0;} #box .img im

  • js实现从右往左匀速显示图片（无缝轮播）

    本文实例为大家分享了js实现从右往左匀速显示图片的具体代码,供大家参考,具体内容如下 前言: 匀速显示图片,一般用于重复显示公司活动系列图片 背景图片: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <style type="text/css"> *{ margin: 0; padding: 0; } .

  • JS实现动态无缝轮播

    JS实现动态无缝轮播

    在同学的帮助下,终于使用纯js代码实现了动态轮播,学无止境加油吧! 效果图是这样的,我们需要定义一个div,并放入三张图片,还需要左右两个按钮,以及底下三个按钮三个div. 先看布局代码 <div class="banner" id="banner"> <ul class="clear" > <li style="left:0" ><img src="k1.jpg"

  • JS实现左右无缝轮播图代码

    废话不多说了,直接给大家贴代码了. 无缝轮播图: <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{position: absolu

  • JS左右无缝轮播功能完整实例

    本文实例讲述了JS左右无缝轮播功能.分享给大家供大家参考,具体如下: 其中对上一页下一页按钮设置visibility属性是为了解决轮播中点击上一页下一页导致的bug,应为是a标签所以用了visibility属性,如果是按钮button可以直接设置在轮播过程中按钮不可点击,当然其他解决方法都可以,以实际为准 代码如下:换换图片就可以直接用 <!DOCTYPE html> <html> <head lang="en"> <meta charset=

  • 原生js实现无缝轮播图效果

    话不多说,请看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝轮播图-原生js封装</title> <link rel="shortcut icon" href="../public/image/favicon.ico" type="ima

随机推荐