<html>

<head>

<meta charset="utf-8">

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

<style type="text/css">

    *{margin: 0;padding: 0;}

    #div1 {width:400px;height:100px;margin:50px 0 0 350px;overflow: hidden;position: absolute;background: red;}

    #div1 ul{position: absolute;left: 0;top: 0;}

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

</style>

</head>

<body>

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

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

<a href="javascript:;">中速</a>

<a href="javascript:;">高速</a>

<div id="div1">

<ul>

    <li><img src="01.jpg" /></li>

    <li><img src="02.jpg" /></li>

    <li><img src="03.jpg" /></li>

    <li><img src="04.jpg" /></li>

</ul>

</div>

<script type="text/javascript">

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

    var oul=odiv.getElementsByTagName('ul')[0];

    var oli=oul.getElementsByTagName('li');

    var speed=-2;

    oul.innerHTML=oul.innerHTML+oul.innerHTML;

    oul.style.width=oli[0].offsetWidth*oli.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';

    }

    var timer=setInterval(move,30);

    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;

    }

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

    {

        speed=-1;

    }

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

    {

        speed=-4;

    }

</script>

</body>

</html>

附件下载

利用JavaScript做无缝滚动的更多相关文章

  1. JavaScript实现无缝滚动 原理详细讲解

    先了解一下对象的几个的属性: innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft: 设置或获取位于对象左边界和 ...

  2. webbrowser内容滚动（javascript内容无缝滚动）

    一 使用webbrowser现有方法 引用:https://blog.csdn.net/xiaokailele/article/details/48392673 public partial clas ...

  3. 利用background-attachment做视差滚动效果

    视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 不明白的可以先看 ...

  4. Javascript图片无缝滚动

    http://www.cnblogs.com/shouce/p/5068787.html

  5. (Demo分享)利用JavaScript（JS）做一个可输入分钟的倒计时钟功能

    利用JavaScript(JS)实现一个可输入分钟的倒计时钟功能本文章为 Tz张无忌 原创文章,转载请注明来源,谢谢合作! 网络各种利用JavaScript做倒计时的Demo对新手很不友好,这里我亲手 ...

  6. JS 实现无缝滚动动画原理（初学者入）

    这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https:/ ...

  7. vue 无缝滚动文字

    前言 用vue做无缝滚动,字体弹幕 就上代码吧 <head> <meta charset="UTF-8"> <style> div, ul, l ...

  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. Javascript做图片无缝平滑滚动

    因需要,google得到.作者不详.多谢.我这里略作修改.只是改变了ID. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

随机推荐

  1. PHP并发IO编程实践

    PHP相关扩展 Stream:PHP内核提供的socket封装 Sockets:对底层Socket API的封装 Libevent:对libevent库的封装 Event:基于Libevent更高级的 ...

  2. 洛谷P1192 台阶问题【dp递归】

    有NN级的台阶,你一开始在底部,每次可以向上迈最多KK级台阶(最少11级),问到达第NN级台阶有多少种不同方式. 输入输出格式 输入格式: 两个正整数N,K. 输出格式: 一个正整数,为不同方式数,由 ...

  3. 将RedHat的yum更换为CentOS的yum

    CentOS6.8 脚本: #安装yum所需的包已经下载到本地 #!/bin/bashrpm -qa | grep yum | xargs rpm -e --nodepsrm -rf /etc/yum ...

  4. layui 导出excel复杂表头

    众所周知 layui的导出功能很好用,但是今天我要给大家推荐一个更好用的 大家来到这里想必也是因为layui无法满足 [导出Excle复杂表头] 的业务需求而来,这里废话不多说但还是强调一点,如果你是 ...

  5. 在vue项目中引用element-ui时 让el-input 获取焦点的方法

    在制作项目的时候遇到一个需求,点击一个按钮弹出一个input输入框,并让输入框获得焦点,项目中引用了ElementUI 在网上查找了很多方法,但是在实际使用中发现了一个问题无论是使用$ref获取inp ...

  6. 阿里云 全部端口port

  7. lucene_02_IKAnalyre

    前言 在lucene中虽然已经提供了许多的分词器:StandardAnalyzer.CJKAnalyzer等,但在解析中文的时候都会把文中拆成一个个的单子. 毕竟老外不懂中文.这里介绍一个中文的分词器 ...

  8. 一个简单的ant应用

    <pre name="code" class="html"><?xml version="1.0" encoding=&q ...

  9. sendfile学习

    参考 https://zhuanlan.zhihu.com/p/20768200?refer=auxten 而成本很多时候的体现就是对计算资源的消耗,其中最重要的一个资源就是CPU资源. Sendfi ...

  10. UVA - 348Optimal Array Multiplication Sequence（递推）

    id=19208">题目:Optimal Array Multiplication Sequence 题目大意:给出N个矩阵相乘.求这些矩阵相乘乘法次数最少的顺序. 解题思路:矩阵相乘 ...