<!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. 《简明python教程》学习笔记，长文

    引号: 单引号:如果包含的字符串里有单引号的话,需要在那个单引号里加转义符号,或者使用双引号 例:print 'he"llo' or print 'he\'llo'    ===> h ...

  2. [项目构建 十三]babasport Nginx负载均衡的详细配置及使用案例详解.

    在这里再次说明下, 这个项目是从网上 找到的一套学习资料, 自己在 空闲时间学习了这些东西. 这里面的code当然会有很多不完善的地方, 但是确实也能学到很多新东西.感谢看过这一些列博文和评论的小伙伴 ...

  3. 基于ffmpeg网络播放器的教程与总结

    基于ffmpeg网络播放器的教程与总结   一.         概述 为了解决在线无广告播放youku网上的视频.(youku把每个视频切换成若干个小视频). 视频资源解析可以从www.flvcd. ...

  4. C++ BigInteger 大整数类模板（转）

    #include <deque> #include <vector> #include <iostream> #include <string> #in ...

  5. CSS3学习笔记（新属性）

    1. 边框(圆角边框.加阴影和用图片绘制) 新增加 border-radius  box-shadow  border-image .div1{ border:2px solid purple; bo ...

  6. SQL server 分离数据库与删除数据库的区别

    今天,在sql server 中,分离数据库,然后就问了一下,与删除数据库的区别 区别在于(百度一下): 分离后,.mdb和.log文件都在,以后你需要用的时候,还可以用附加数据库的方法加上去,分离数 ...

  7. RMQ——[USACO Jan07] 均衡队形题解

    题目:[USACO Jan07] 均衡队形 描述: 题目描述 农夫约翰的 N (1 ≤ N ≤ 50,000) 头奶牛,每天挤奶时总会按同样的顺序站好.一日,农夫约翰决定为奶牛们举行一个“终极飞盘”比 ...

  8. des加密解密源码 C# key值问题

    公司协议安全需求.需要对传输内容做des.md5加密. 因为是新人.刚交给我这个任务的时候有点眩晕.就开始在网上找各种des加密的内容.因为不懂以为需要把原理也搞明白,最后误了时间.把自己也搞糊涂了. ...

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

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

  10. js的深拷贝和浅拷贝

    一.数组的深浅拷贝 在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份,事实证明如果只是简单的将它赋予其他变量,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致 ...