一：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. 使用Nginx+FFMPEG搭建HLS直播转码服务器

    目的:使Nginx支持Rtmp协议推流,并支持hls分发功能及FFMPEG转码多码率功能. 一.准备工作 模块:nginx-rtmp-module-master(支持rtmp协议) 下载地址: htt ...

  2. 提高Android Studio运行、编译速度方案

    1.安装完成后启动卡死 刚刚打开studio就卡在gradle building的界面再也不动了(去连接墙外的网下载),那么这个时候我们就需要把这个联网下载操作屏蔽掉,找到studio安装目录,找到i ...

  3. Java IO 学习（一）同步/异步/阻塞/非阻塞

    关于IO,同步/异步/阻塞/非阻塞,这几个关键词是经常听到的,譬如: “Java oio是阻塞的,nio是非阻塞的” “NodeJS的IO是异步的” 但是这些东西听多了就容易迷糊,比方说同步是否就是阻 ...

  4. Codeforces Round #450 (Div. 2) A. Find Extra One【模拟/判断是否能去掉一个点保证剩下的点在Y轴同侧】

    A. Find Extra One time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  5. MapReduce1 工作机制

    本文转自:Hadoop MapReduce 工作机制 工作流程 作业配置 作业提交 作业初始化 作业分配 作业执行 进度和状态更新 作业完成 错误处理 作业调度 shule(mapreduce核心)和 ...

  6. SDOI 2015 约束个数和

    Description: 共\(T \le 5 \times 10^4\)组询问, 每组询问给定\(n\)和\(m\), 请你求出 \[ \sum_{i = 1}^n \sum_{j = 1}^m \ ...

  7. iOS -- iOS11新特性，如何适配iOS11

    前言 这几天抽空把WWDC的Session看了一些,总结了一些iOS11新的特性,可能对我们的App有影响,需要我们进行适配.本文作为一个总结. 本文内容包括:集成了搜索的大标题栏.横向选项卡栏.Ma ...

  8. php 列出当前目录

    $path="."; //初使化用户所操作目录 $prevpath=dirname($path); //初使化当前脚本所在目录 $dir_handle=opendir($path) ...

  9. docker入门小结（二）

    11,网络使用 sudo docker run -d -P training/webapp python app.py sudo docker ps -l 这样将主机一个端口映射到容器中,由于app. ...

  10. 2016.6.20 tomcat安装出现No Java Virtual Machine found in..

    安装tomcat时,选择安装路径为自定义路径,但是出现提示: No Java Virtual Machine found in.. 心想这和java虚拟机什么关系啊.百度了之后发现,安装过程中有一步是 ...