一：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. MQ 分拆Json数据包然后上传

    public void UploadInsurHistory() { using (IDbConnection connection = ConnConfig.DmsConnection) { IDb ...

  2. Codeforces 754A Lesha and array splitting (搜索)

    题目链接 Lesha and array splitting 设s[i][j]为序列i到j的和,当s[i][j]≠0时,即可从i跳到j+1.目标为从1跳到n+1,所以按照题意暴力即可. #includ ...

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

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

  4. Swift 基础部分（建议掌握OC字符串知识的翻阅）

    更新说明: Swift 目前已经发布到4.0版本了,以前写的这整个Swift学习系列的文章,有很多的不足之处,我会重新整理整个系列文章,也是相当于重新复习一遍Swift,后面系列文章的改动之处全都会做 ...

  5. Network | Cookie and Session

    Cookies are arbitrary pieces of data chosen by the web server and sent to the browser. The browser r ...

  6. 基于http的断点续传和多线程下载

    HTTP协议的GET方法,支持只请求某个资源的某一部分: 206 Partial Content 部分内容响应: Range 请求的资源范围: Content-Range 响应的资源范围: 断点续传: ...

  7. Artix : Arch拥抱OpenRC 使用笔记

    轻量桌面Archlinux用户逃离systemd,拥抱Gentoo的openrc. 镜像源:官方镜像源非常慢,曾经一度体验artix后就放弃了,后来发现了清华和腾讯云的镜像,速度非常快,现在又重新安装 ...

  8. TiKV 源码解析系列——Placement Driver

    https://zhuanlan.zhihu.com/p/24809131?refer=newsql

  9. 真正解决 thinkphp 验证码 出错 无法显示 问题

    今天做到验证码这一块想到tp自带验证图片  大喜单鼓捣半天不出来 一直是个小 X 官方提示:如果无法显示验证码,请检查:² PHP是否已经安装GD库支持:²输出之前是否有任何的输出(尤其是UTF8的B ...

  10. #pragma预处理命令【转】

    原文 : http://www.cnblogs.com/qinfengxiaoyue/archive/2012/06/05/2535524.html #pragma可以说是C++中最复杂的预处理指令了 ...