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

<style>

* {margin:0; padding:0;}

#div1{width:1172px; height:220px; margin:100px auto; position:relative; background:red; overflow:hidden;}

#div1 ul li{float:left;width:293px; height:220px; list-style:none; }

</style>

<script>

window.onload=function ()

{

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

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

    var aLi=oUl.getElementsByTagName('li');

    var timer;

    var speed=-2;

    oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;

    oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';

    function move(){

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

        {

            oUl.style.left=0;

        }

        if(oUl.offsetLeft>0)

        {

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

        }

        oUl.style.left=oUl.offsetLeft+speed+'px';

        };

    oDiv.onmouseover=function ()

    {

        clearInterval(timer);

    }

    oDiv.onmouseout=function ()

    {

        timer=setInterval(move,30);

    }

    document.getElementsByTagName('a')[0].onclick=function ()

    {

        speed=-2;

    }

    document.getElementsByTagName('a')[1].onclick=function ()

    {

        speed=2;

    }

};

</script>

</head>

<body>

<a href="javascript:;">向左滚</a>

<a href="javascript:;">向右滚</a>

<div id="div1">

  <ul style="position:absolute; left:0; top:0;">

    <li><img src="data:images/05.jpg"/></li>

    <li><img src="data:images/05.jpg"/></li>

    <li><img src="data:images/05.jpg"/></li>

    <li><img src="data:images/05.jpg"/></li>

  </ul>

</div>

</body>

一开始遇到了个问题，ul的样式是外部样式，所以代码oUl.style.left=oUl.offsetLeft-2+'px'有问题，程序跑不了，style不能取外部样式，谨记！

定时器
开启定时器
setInterval 间隔型
setTimeout 延时型
停止定时器
clearInterval
clearTimeout

JS定时器的使用--无缝滚动的更多相关文章

  1. js 实现图片的无缝滚动

      js 实现图片的无缝滚动 CreateTime--2018年3月7日17:18:34 Author:Marydon 测试成功 <!DOCTYPE html> <html> ...

  2. js函数——倒计时模块+无缝滚动

    倒计时 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  3. 用js实现图片的无缝滚动效果

    实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...

  4. 【js】横/纵向无缝滚动

    1.纵向无缝滚动(类似淘宝) ps:存在一个问题,当鼠标移入时,未关闭定时器 <!DOCTYPE html> <html> <head> <meta char ...

  5. JS 阶段小练习~ 无缝滚动

    结合下学了的知识,做个模拟的综合性扩展练习~~  大致功能如下: 1.点开html后,图片自动移动展示 2.点击左右方向,可以改变 图片移动的方向(改变left的值,正负) 3.鼠标移入移出图片后,图 ...

  6. 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器

    项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...

  7. JS实现文字图片无缝滚动

    今天做项目遇到一个滚动的效果,本来打算用marquee做的,因为它是html自带的标签,写起来简单,但是有一个问题就是marquee不能实现无缝滚动,上网找了一些方法,发现marquee可以实现无缝, ...

  8. vue无缝滚动的插件开发填坑分享

    写插件的初衷 1.项目经常需要无缝滚动效果,当时写jq的时候用用msClass这个老插件,相对不上很好用. 2.后来转向vue在vue-awesome没有找到好的无缝滚动插件,除了配置swiper可以 ...

  9. js基础教程四之无缝滚动

    前面学习了相关js的一些基础知识,这节主要针对定时器作综合运用: 无缝滚动-基础 效果演示: *物体运动基础 *让div移动起来 *offsetLeft的作用 *用定时器让物体连续移动 <sty ...

随机推荐

  1. 打开"我的电脑"等特殊文件夹ShellExecute

    procedure TForm2.btn10Click(Sender: TObject); begin ShellExecute(handle,'open','mailt', nil,nil,SW_S ...

  2. Web调用安卓，苹果手机摄像头，本地图片和文件

    由于要给一个客户做一个记账WAP,里面有调用手机拍照功能,这里记录一下,以供需要的朋友,下面是完整的一个HTML页面内容,放在服务器上然后浏览就可以了,只支持Chrome和Safari核的浏览器,我测 ...

  3. Openjudge-计算概论（A）-字符串排序

    描述 参考整数排序方法,设计一种为字符串排序的算法,将字符串从小到大输出 输入 第一行为测试数据组数t, 后面跟着t组数据.每组数据第一行是n,表示这组数据有n行字符串,接下来是要排序的n行字符串.每 ...

  4. setting up a IPSEC/L2TP vpn on CentOS 6 or Red Hat Enterprise Linux 6 or Scientific Linux

    This is a guide on setting up a IPSEC/L2TP vpn on CentOS 6 or Red Hat Enterprise Linux 6 or Scientif ...

  5. IE/Chrome背景图片居中1px偏移解决方法

    最近在支持行业运营的一个推广页面,遇到了非常规的页面banner图居中的问题,为了解决此问题,做了简单的测试,做了一个小结,为经常做大促页面的兄弟姐妹们提供参考解决方案. 首先来看看现象.最经典的页面 ...

  6. ASP.NET中的Excel操作(NPOI方式)

    代码准备: 一:实体准备 代码如下: /// <summary> /// 一个能添加到将要导出到指定行的实体类型规范 /// data:{int StartColIndex ? 0, in ...

  7. 域名、网站名、url的定义

    网址:http://jingyan.baidu.com/article/2c8c281df0afd00008252aa7.html

  8. Stash安装和破解

    参考资料: http://www.unxmail.com/?p=590 上篇介绍了,Atlassian Stash v2.12.1 破解版的下载, 有同学不会安装. 我重新整理了下文档. 表述我的安装 ...

  9. GetWindowRect和GetClientRect的异同

    由于项目需要,需要学习CGridCtrl控件的使用,测试控件时发现了一个问题,我无法将控件放在对话框的制定位置. 该问题的原因很容易发现,其实就是GetWindowRec()函数和GetClientR ...

  10. 使用cocoapods的两个大坑的修改方法

    1.报错内容: [!] The dependency `ReactiveCocoa (= 2.1.8)` is not used in any concrete target. The depende ...