<!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. Linux与Windows文件同步

    Linux与Windows文件同步 本次采用的同步方式是rsync,Rsync是一款免费且强大的同步软件,可以镜像保存整个目录树和文件系统,同时保持原来文件的权限.时间.软硬链接.第一次同步时会复制全 ...

  2. 记一次 .NET 某机械臂智能机器人控制系统MRS CPU爆高分析

    一:背景 1. 讲故事 这是6月中旬一位朋友加wx求助dump的故事,他的程序 cpu爆高UI卡死,问如何解决,截图如下: 在拿到这个dump后,我发现这是一个关于机械臂的MRS程序,哈哈,在机械臂这 ...

  3. MyBatis学习总结(四)——字段名与实体类属性名不相同的冲突的解决

    表中的字段名和表对应实体类的属性名称不一定都是完全相同的,这种情况下的如何解决字段名与实体类属性名不相同的冲突.如下所示: 一.准备演示需要使用的表和数据 CREATE TABLE my_user( ...

  4. MyBatis学习总结(一)——MyBatis入门学习

    一.MyBatis 简介 MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.MyBatis可 ...

  5. MySQL——MySQL客户端命令

    1. mysql: (1)用于数据库连接 (2)用于管理数据库: a: 命令接口自带命令 b: SQL语句: DDL: 数据库定义语言 DCL: 数据库控制语言 DML: 数据库操作语言 2. mys ...

  6. 性能测试必备命令（2）- uptime

    性能测试必备的 Linux 命令系列,可以看下面链接的文章哦 https://www.cnblogs.com/poloyy/category/1819490.html 介绍 系统启动up了(运行了)多 ...

  7. Windos下通过Wpcap抓包实现两个网卡桥接

    目录 1. 背景: 2. 需要的技术手段: 3. 实现逻辑: 4. 应用实例: 1. 背景: 一台电脑允许接多个网口,当然大部分只有一个网口其余都是USB扩展而来,而每个网口之间需要配置不同的网段IP ...

  8. ASP.NET Core Web API 教程 - Project Configuration

    ASP.NET Core Web API 教程 本系列文章主要参考了<Ultimate ASP.NET Core 3 Web API>一书,我对原文进行了翻译,同时适当删减.修改了一部分内 ...

  9. 缩减Centos7xfs磁盘空间

    问题描述:df -h查看 root目录仅有20G空间,其余300G空间全在home目录下.xfs不可以直接缩减,所以只能删除xfs盘然后重新添加. 解决办法: 1. 注释想要删除的磁盘,此处以cent ...

  10. git合并内容的1个方式

    诉求 把自己的改动的文件合并到目标分支: 不想改那些不属于自己开发时出现的冲突: 操作 开发分支dev,要合并至master分支 1 所有改动都已提交,保持分支的干净状态(working tree c ...