<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="vue.js"></script>

    <style>

        div,ul,li,img{

            margin:0;

            padding:0;

        }

        #div1{

            width:1000px;

            height:200px;

            margin:0 auto;

            position: relative;

            overflow: hidden;

        }

        #div1 ul{

            position: absolute;

            list-style: none;

            left:0;

        }

        #div1 ul li{

            margin:5px;

            height:200px;

            width:200px;

            background: #f00;

            float:left;

        }

    </style>

    <script>

    window.onload=function(){

        var oDiv=document.getElementById("div1");

        var oUl=oDiv.getElementsByTagName('ul')[0];//ul是数组，获取第一个ul

        var oLi=oUl.getElementsByTagName("li");

        var sid;

        oUl.innerHTML+=oUl.innerHTML;

        oUl.style.width=oLi[0].offsetWidth*oLi.length+"px";//oUl的宽度等于li的宽度*li的长度。

        sid=setInterval(function(){//定时器

            oUl.style.left=oUl.offsetLeft-3+"px";

            if(oUl.offsetLeft<-oUl.offsetWidth/2){

                oUl.style.left="0px";

            }

        },30);

        oUl.onmouseover=function(){//鼠标移入关闭定时器

            clearInterval(sid);

        };

        oUl.onmouseout=function(){//鼠标移出开启定时器

            sid=setInterval(function(){

            oUl.style.left=oUl.offsetLeft-3+"px";

            if(oUl.offsetLeft<-oUl.offsetWidth/2){

                oUl.style.left="0px";

            }

        },30);

        }

    }

    </script>

</head>

<body>

    <div id="div1">

        <ul>

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

            <li>6</li>

        </ul>

    </div>

</body>

</html>

原生js-无缝滚动的更多相关文章

  1. 手写JS无缝滚动插件

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  2. js无缝滚动原理及详解[转自刹那芳华]

    刚刚接触JS,网上找了一些关于无缝滚动的教程,但都大同小异,对我这种新手来说也只是会用,不知道什么意思,想要自己写个更是一头雾水.于是找了一些资料,详细说明一下JS无缝滚动的原理,相信看过这篇文章之后 ...

  3. 原生Js页面滚动延迟加载图片

    原理和过程1.页面滚动加载事件2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片3.获取元素集合 加载过的图片从集合里删除 效果预览:http://jsfiddle.net/dtdxr ...

  4. html通过css,js实现div悬浮效果总汇，如原生JS实现滚动到一定位置实现div悬浮

    在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为f ...

  5. js原生实现 无缝滚动图片

    <!-- 无缝滚动图片开始 --> <div id=demopic style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #fff; H ...

  6. js 无缝滚动效果学习

    <!DOCTYPE html> <html> <head> <title>无缝滚动测试</title> <meta http-equi ...

  7. js无缝滚动跑马灯

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. JS无缝滚动

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...

  9. [Js]无缝滚动

    效果: 1.默认缓慢往左滚动 2.放到左箭头上还是向左滚动,放到右箭头上向右滚动 3.放到图片上停止滚动,移出继续滚动 思路: 1.计算图片列表ul的宽度 2.开启定时器,使其向左边距不断增大,造成向 ...

  10. JS——无缝滚动

    1.描述——无缝滚动图片 2.代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

随机推荐

  1. 解决->maven下载失败bug

    一.前言: 经过一个下午的奋斗(谷歌,视频...重装)后终,于暂时解决了上一篇文章中的bug 传送门:https://blog.csdn.net/weixin_44092288/article/det ...

  2. Tars | 第3篇 Tars中期汇报测试文档（Java语言实现Subset路由规则）

    目录 前言 1. 任务介绍 2. 测试模拟方案 2.0 *前置工作 2.1 添加路由规则 2.2 添加存活节点 2.3 [输出]遍历输出当前存活节点 2.4 [核心]对存活节点按subset规则过滤 ...

  3. NOIP模拟16:「Star Way To Heaven·God Knows·Loost My Music」

    T1:Star Way To Heaven 基本思路:   最小生成树.   假如我们将上边界与下边界看作一个点,然后从上边界经过星星向下边界连边,会发现,他会形成一条线将整个矩形分为左右两个部分. ...

  4. [考试总结]noip模拟39

    不写那么多没用的了 开题就发现 \(T4\) 原题, \(T1\) 大水题. 然后发现 \(T4\) 忘了.... 不扯了 打地鼠 大水题,我代码都不想放... 算了,还是放一下吧.. #includ ...

  5. Linux - last 命令（Mac 电脑）

    前言 为啥写这篇? 因为听 grep.sed 教程的时候有这个命令栗子 加上工作中,运维给我排查问题的时候也用到了,感觉挺重要,先了解为敬! 命令作用 显示用户和TTY的最后登录次数 这个是在 Mac ...

  6. jquery实现强制刷新

    $('iframe.active').attr('src', $('iframe.active').attr('src'));

  7. 方法重载(Override)

    什么是方法的重写(override 或 overwrite)? 子类继承父类以后,可以对父类中同名同参数的方法,进行覆盖操作. 应用: 重写以后,当创建子类对象以后,通过子类对象调用子父类中的同名同参 ...

  8. xshell与小键盘问题

    有些程序员的键盘是带有小数字键的,在使用xshell中文版时就可能出现一些小状况,本集就同大家分析一下使用数字键盘出现乱码的情况怎么办. 图1:使用数字小键盘出现乱码 问题描述: 在xshell上用v ...

  9. 记一次docker compose的低级错误

    记一次docker compose的低级错误 问题 ​ 今天在学习dockercompose的时候,启动docker compose up,结果却出现异常 Error response from da ...

  10. 5ucms后台新增字段

    1.修改admin\inc\class_content.asp文件,把需要的字段添加进去 2.修改\admin\admin_content.asp 文件,把需要的字段添加进后台操作模板 3.用sql语 ...