<!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <style>

 *{padding:0; margin:0;}

 ul{ list-style:none;}

 #div{ width:300px; height:100px; margin:100px auto; border:1px solid #ff0000; position:relative; overflow:hidden;}

 #div ul{ position:absolute; height:100px; left:0;}

 #div ul li{ width:300px; height:100px; line-height:100px; text-align:center; float:left}

 </style>

 <script>

 window.onload=function(){

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

     var oUl=oDiv.getElementsByTagName("ul")[0];

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

     var oInput=document.getElementsByTagName('input');

     oUl.innerHTML +=oUl.innerHTML;

     oUl.style.width=oLi[0].offsetWidth*oLi.length+"px";

     var iSeep=-2;

     var tamer=null;

     clearInterval(tamer);

     function starMove(){

          tamer=setInterval(function(){

             oUl.style.left=oUl.offsetLeft+iSeep+"px";

             if(-oUl.offsetLeft >= oUl.offsetWidth/2){

                 oUl.style.left="0px";

             }else if(oUl.offsetLeft>0){

                 oUl.style.left=-oUl.offsetWidth/2+"px";

             }

         },30)

     }

     starMove();

     oDiv.onmouseover=function(){

         clearInterval(tamer);

     }

     oDiv.onmouseout=function(){

         starMove();

     }

     oInput[0].onclick=function(){

         iSeep=-2;

     }

     oInput[1].onclick=function(){

         iSeep=2;

     }

 }

 </script>

 </head>

 <body>

 <input type="button" value="左">

 <input type="button" value="右">

 <div id='div'>

     <ul>

         <li>1</li>

         <li>2</li>

         <li>3</li>

         <li>4</li>

     </ul>

 </div>

 </body>

 </html>

无缝滚动js （手写通俗易懂）的更多相关文章

  1. jQuery图片无缝滚动JS代码ul/li结构

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 原生html、js手写 radio与checkbox 美化

    原生html.js手写 radio与checkbox   美化 html <!DOCTYPE html> <html> <head> <meta charse ...

  3. 常见的JS手写函数汇总（代码注释、持续更新）

    最近在复习面试中常见的JS手写函数,顺便进行代码注释和总结,方便自己回顾也加深记,内容也会陆陆续续进行补充和改善. 一.手写深拷贝 <script> const obj1 = { name ...

  4. 五四青年节，今天要学习。汇总5道难度不高但可能遇到的JS手写编程题

    壹 ❀ 引 时间一晃,今天已是五一假期最后一天了,没有出门,没有太多惊喜与意外.今天五四青年节,脑子里突然想起鲁迅先生以及悲欢并不相通的话,我的五一经历了什么呢,忍不住想说那大概是,父母教育孩子大声嚷 ...

  5. 轮播图--JS手写

    轮播图基本每个网站都会有,也有很多的JQuery插件可以用,这里是用JS代码写的. @{ Layout = null; } <!DOCTYPE html> <html> < ...

  6. 浅谈时钟的生成(js手写代码)

    在生成时钟的过程中自己想到布置表盘的写法由这么几种: 当然利用那种模式都可以实现,所以我们要用一个最好理解,代码有相对简便的方法实现 1.利用三角函数 用js在三角函数布置表盘的过程中有遇见到这种情况 ...

  7. 不借助jquery封装好的ajax，你能用js手写ajax框架吗

    不借助jquery封装好的ajax,你能手写ajax框架吗?最基础的ajax框架,一起来围观吧. .创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); ...

  8. js手写图片查看器（图片的缩放、旋转、拖拽）

    在做一次代码编辑任务中,要查看图片器.在时间允许的条件下,放弃了已经封装好的图片jq插件,现在自己手写js实现图片的缩放.旋转.推拽功能! 具体代码如下: <!DOCTYPE html> ...

  9. js手写俄罗斯方块

    代码如下 html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

随机推荐

  1. 打patch p0 p1区别

    如何使用patch 对于一个patch文件,有两种常用使用方法: 1.代码:cat new-patch | patch -p0 2.代码:patch -p0 < new-patch   patc ...

  2. HBase Java API使用（一）

    前言 1. 创建表:(由master完成) 首先需要获取master地址(master启动时会将地址告诉zookeeper)因而客户端首先会访问zookeeper获取master的地址 client和 ...

  3. Ext tabpanel集成第三方charts(echarts、amcharts等)的问题(报getstyle为null的错误)

    最近在做ext集成charts的功能,主要是使用tabpanel,将charts集成到tab中,随便切换tab选项就会报错崩溃. 之前演示的时候也发现了该问题,由于在tab项中有加载svg文件的操作, ...

  4. Java---练习(面试题) ：字符串截取(2-最终版)

    在java中,字符串"abcd"与字符串"ab你好"的长度是一样,都是四个字符. 但对应的字节数不同,一个汉字占两个字节. 定义一个方法,按照指定的字节数来取子 ...

  5. CSU 1111 有三户人家共拥有一座花园，每户人家的太太均需帮忙整理花园。A 太太工作了5 天，B 太太则工作了4 天，才将花园整理完毕。C 太太因为正身怀六甲无法加入她们的行动，所以就打算出90元钱

    题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82974#problem/D 解题思路:本题的意思就是三位均出90,然后AB按做 ...

  6. Spring的MVC控制器返回ModelMap时，会跳转到什么页面？

    控制器中的方法如下: @RequestMapping("/person/personDisplay") public ModelMap defaultHandler() { Sys ...

  7. Forward Proxy & Reverse Proxy | 正向代理 和 反向代理

    对请求和响应内容不做修改的转发的服务器,被称为代理服务器.代理服务器分为两种类型:正向代理 和 反向代理. 正向代理:面向互联网,从更广范围获取信息的代理. 反向代理:面向内部,一般用于某企业的网站的 ...

  8. MARCHdesign_王濤's 星云个人网站 | www.xingyun.cn/MARCHdesign

    MARCHdesign_王濤's 星云个人网站 | www.xingyun.cn/MARCHdesign MARCHdesign_王濤

  9. [置顶] 【Git入门之九】解决冲突

    原创作品,转载请标明:http://blog.csdn.net/jackystudio/article/details/12309531 1.多人协作冲突 如果多人同时修改了同一个文件,那会出现什么样 ...

  10. nc命令

    监视指定网络接口的数据包 nc -l -u 1001 像指定端口使用指定协议发送数据包 nc -l -u 192 168.10.11 1001