一：html部分

<body>

  <input id="btn1" type="button" value="向左">

  <input id="btn2" type="button" value="向右">

  <div id="div1">/*外框，显示区域*/

    <ul id="ul1">/*循环滚动的内容,下面js控制赋值一份相同的内容*/

      <li>111111</li>

      <li>22222</li>

      <li>33333</li>

      <li>44444</li>

    </ul>

  </div>

</body>

二：样式表内容

<style>

    *{

      margin:;

      padding:;

    }

    #div1{

      width: 640px;

      height: 120px;

      margin: 100px auto;

      background-color: #646464;

      position: relative;

      overflow: hidden;

    }

    #div1 ul{

      position:absolute;

      left:;

      top:;

      overflow: hidden;

      background-color: #3b7796;

    }

    #div1 ul li{

      float: left;

      width: 160px;

      height: 120px;

      list-style: none;

    }

  </style>

三：js部分

*定义一个速度变量speed，贯穿整个滚动过程

*把html中的滚动部分，复制一份。相当于两份一样的滚动内容

*move()方法，通过判断滚动的位置，当第一份内容的最后一副图滚动完成，就让其回复初始位置。

<script>

    window.onload = function(){

        /*1.定义滚动的内容、定义速度变量speed、定义滑动部分的宽度=图片数量*图片宽度*/

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

      var oUl = document.getElementById('ul1');

      oUl.innerHTML += oUl.innerHTML;//图片内容*2-----参考图（2）

      var oLi= document.getElementsByTagName('li');

      oUl.style.width = oLi.length*160+'px';//设置ul的宽度使图片可以放下

       var speed = 2;//初始化速度

       /*2.给左右按钮加点击事件*/

      var oBtn1 = document.getElementById('btn1');

      var oBtn2 = document.getElementById('btn2');

        var timer = setInterval(move,30);//全局变量 ，保存返回的定时器

      oBtn1.addEventListener('click',function(){

        speed = -2;

      },false);

      oBtn2.addEventListener('click',function(){

        speed = 2;

      },false);

       /*3.给鼠标加划入划出事件*/

      oDiv.addEventListener('mouseout', function () {

        timer = setInterval(move,30);

      },false);

      oDiv.addEventListener('mouseover', function () {

        clearInterval(timer);//鼠标移入清除定时器

      },false);

        /* 定义移动的move()方法*/

      function move(){

        if(oUl.offsetLeft<-(oUl.offsetWidth/2)){//向左滚动，当靠左的图4移出边框时

          oUl.style.left = 0;

        }

        if(oUl.offsetLeft > 0){//向右滚动，当靠右的图1移出边框时

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

        }

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

      }

    }

  </script>

JS实现图片无缝滚动特效；附addEventListener()方法、offsetLeft和offsetWidth属性。的更多相关文章

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

    在改章节中,我们主要介绍图片滚动的内容,自我感觉有个不错的建议和大家分享下 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据 ...

  2. 用JS写的无缝滚动特效

    代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...

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

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

  4. Sequence.js 实现带有视差滚动特效的图片滑块

    Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果.让多层背景以不同的速度移动,形成立体的运动效果 ...

  5. jQuery 间歇式无缝滚动特效分享(三张图片平行滚动)

    最近项目中门户首页需要做出图片间歇式无缝滚动特效,但是在网上找资料都是不太理想,不过可以指导.最后自己写了一个demo实现了这个特效,分享出来. 1.jquery.cxscroll.js /*! * ...

  6. jQuery图片无缝滚动

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

  7. JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动

    一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...

  8. jquery图片无缝滚动代码左右 上下无缝滚动图片

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

  9. 应用JavaScript搭建一个简易页面图片无缝滚动效果

    页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...

随机推荐

  1. Linux 中/etc/profile、~/.bash_profile 环境变量配置及执行过程

    环境变量是和Shell紧密相关的,用户登录系统后就启动了一个Shell.对于Linux来说一般是bash,但也可以重新设定或切换到其它的 Shell.对于UNIX,可能是CShelll.环境变量是通过 ...

  2. Xamarin XAML语言教程将XAML设计的UI显示到界面

    Xamarin XAML语言教程将XAML设计的UI显示到界面 如果通过XAML将UI设计好以后,就可以将XAML中的内容显示给用户了,也就是显示到界面上.由于创建XAML文件方式的不同,所以将XAM ...

  3. Java死锁及解决

    Java线程死锁如何避免这一悲剧  Java线程死锁需要如何解决,这个问题一直在我们不断的使用中需要只有不断的关键.不幸的是,使用上锁会带来其他问题.让我们来看一些常见问题以及相应的解决方法: Jav ...

  4. 利用Jdk 6260652 Bug解析Arrays.asList

    在java.util.ArrayList源码中: c.toArray might (incorrectly) not return Object[] (see 6260652) 产生疑惑: 附上Jav ...

  5. 查看tomcat启动文件都干点啥---Bootstrap.java

    在上一章查看tomcat启动文件都干点啥---catalina.bat,说了在catalina.bat中都走了什么流程,最重要的是,我们得出了如下这段命令: _EXECJAVA=start " ...

  6. 使用nginx实现的灰度发布思路研究（待实践）

    灰度发布也叫 A/B 测试,原理是一套系统在实现了负载均衡,全国节点都部署了系统之后,可以在新功能上线后,让一小部分用户先使用,从中收集使用信息来做对比和发现bug,及时调整,最终分发到全国的节点. ...

  7. Laravel 时间处理

    $info['date'] = $item->created_at->diffForHumans();//友好时间显示 $info['date'] = $item->created_ ...

  8. 【iOS】Frame和Bounds的区别以及获取绝对坐标的办法

    终于搞清楚了,UIView中的frame获取的是相对于所在ParentView的坐标,而bounds则是指UIView本身的坐标.比如下图(假设A是屏幕): View B的Frame坐标是指相对于Vi ...

  9. hdu3591The trouble of Xiaoqian 多重背包+全然背包

    //给出Xiaoqian的钱币的价值和其身上有的每种钱的个数 //商家的每种钱的个数是无穷,xiaoqian一次最多付20000 //问如何付钱交易中钱币的个数最少 //Xiaoqian是多重背包 / ...

  10. log4j.properties(信息打印)

    ### set log levels ###log4j.rootLogger = INFO , console , debug , error ### console ###log4j.appende ...