一：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. 内存 : CL设置

    CL(CAS Latency):为CAS的延迟时间,这是纵向地址脉冲的反应时间,也是在一定频率下衡量支持不同规范的内存的重要标志之一. 内存负责向CPU提供运算所需的原始数据,而目前CPU运行速度超过 ...

  2. Ticket Lock, CLH Lock, MCS Lock

    如果不用OS提供的mutex,我们该如何实现互斥锁?(不考虑重入的情况) 1. naive lock 最简单的想法是,搞一个volatile类型的共享变量flag,值可以是flase(无锁)或者tru ...

  3. Codeforces 703D Mishka and Interesting sum（离线 + 树状数组）

    题目链接  Mishka and Interesting sum 题意  给定一个数列和$q$个询问,每次询问区间$[l, r]$中出现次数为偶数的所有数的异或和. 设区间$[l, r]$的异或和为$ ...

  4. [Machine Learning with Python] Data Preparation by Pandas and Scikit-Learn

    In this article, we dicuss some main steps in data preparation. Drop Labels Firstly, we drop labels ...

  5. TensorFlow——共享变量的使用方法

    1.共享变量用途 在构建模型时,需要使用tf.Variable来创建一个变量(也可以理解成节点).当两个模型一起训练时,一个模型需要使用其他模型创建的变量,比如,对抗网络中的生成器和判别器.如果使用t ...

  6. 10.1综合强化刷题 Day1 morning

    位运算1(bit) Time Limit:1000ms   Memory Limit:128MB 题目描述 LYK拥有一个十进制的数N.它赋予了N一个新的意义:将N每一位都拆开来后再加起来就是N所拥有 ...

  7. SecureCRT介绍、安装、使用（转）

    http://blog.csdn.net/liang19890820/article/details/49701429 简介 SecureCRT是一款支持SSH(SSH1和SSH2)的终端仿真程序,简 ...

  8. Spring IOC（转载）

    学习过Spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注入)这两个概念,对于初学Spring的人来说,总觉得IoC .DI这两个概念是模糊不清的,是很难理解的,今天和大家 ...

  9. GIS可视化——麻点图

    一.引言 目前在客户端绘制POI(Point of Interest,兴趣点)的方式主要是div(Marker的形式).svg.canvas.VML(后边三种就是Vector Layer)几种方式,这 ...

  10. Log4cplus入门

    Log4cplus使用指南 1.  Log4cplus简单介绍 log4cplus是C++编写的开源的日志系统,前身是java编写的log4j系统.受Apache Software License保护 ...