一：html部分

  1. <body>
  2.   <input id="btn1" type="button" value="向左">
  3.   <input id="btn2" type="button" value="向右">
  4.   <div id="div1">/*外框，显示区域*/
  5.  
  6.     <ul id="ul1">/*循环滚动的内容,下面js控制赋值一份相同的内容*/
  7.       <li>111111</li>
  8.       <li>22222</li>
  9.       <li>33333</li>
  10.       <li>44444</li>
  11.     </ul>
  12.   </div>
  13. </body>

二：样式表内容

  1. <style>
  2.     *{
  3.       margin:;
  4.       padding:;
  5.     }
  6.     #div1{
  7.       width: 640px;
  8.       height: 120px;
  9.       margin: 100px auto;
  10.       background-color: #646464;
  11.       position: relative;
  12.       overflow: hidden;
  13.     }
  14.     #div1 ul{
  15.       position:absolute;
  16.       left:;
  17.       top:;
  18.       overflow: hidden;
  19.       background-color: #3b7796;
  20.     }
  21.  
  22.     #div1 ul li{
  23.       float: left;
  24.       width: 160px;
  25.       height: 120px;
  26.       list-style: none;
  27.     }
  28.   </style>

三：js部分

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

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

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

  1. <script>
  2.     window.onload = function(){
  3.         /*1.定义滚动的内容、定义速度变量speed、定义滑动部分的宽度=图片数量*图片宽度*/
  4.       var oDiv = document.getElementById('div1');
  5.       var oUl = document.getElementById('ul1');
  6.       oUl.innerHTML += oUl.innerHTML;//图片内容*2-----参考图（2）
  7.       var oLi= document.getElementsByTagName('li');
  8.       oUl.style.width = oLi.length*160+'px';//设置ul的宽度使图片可以放下
  9.        var speed = 2;//初始化速度
  10.  
  11.        /*2.给左右按钮加点击事件*/
  12.       var oBtn1 = document.getElementById('btn1');
  13.       var oBtn2 = document.getElementById('btn2');
  14.  
  15.         var timer = setInterval(move,30);//全局变量 ，保存返回的定时器
  16.  
  17.       oBtn1.addEventListener('click',function(){
  18.         speed = -2;
  19.       },false);
  20.       oBtn2.addEventListener('click',function(){
  21.         speed = 2;
  22.       },false);
  23.  
  24.        /*3.给鼠标加划入划出事件*/
  25.       oDiv.addEventListener('mouseout', function () {
  26.         timer = setInterval(move,30);
  27.       },false);
  28.       oDiv.addEventListener('mouseover', function () {
  29.         clearInterval(timer);//鼠标移入清除定时器
  30.       },false);
  31.  
  32.         /* 定义移动的move()方法*/
  33.       function move(){
  34.         if(oUl.offsetLeft<-(oUl.offsetWidth/2)){//向左滚动，当靠左的图4移出边框时
  35.           oUl.style.left = 0;
  36.         }
  37.  
  38.         if(oUl.offsetLeft > 0){//向右滚动，当靠右的图1移出边框时
  39.           oUl.style.left = -(oUl.offsetWidth/2)+'px';
  40.         }
  41.  
  42.         oUl.style.left = oUl.offsetLeft + speed + 'px';
  43.       }
  44.  
  45.     }
  46.  
  47.   </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. webpack常用配置项配置文件介绍

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

  2. Find Median from Data Stream - LeetCode

    Median is the middle value in an ordered integer list. If the size of the list is even, there is no ...

  3. luogu P2423 双塔

    题目描述 2001年9月11日,一场突发的灾难将纽约世界贸易中心大厦夷为平地,Mr. F曾亲眼目睹了这次灾难.为了纪念“911”事件,Mr. F决定自己用水晶来搭建一座双塔.Mr. F有N块水晶,每块 ...

  4. java反射和代理

    这一篇我们说说反射和动态代理,为什么这两个要一起说呢?因为动态代理中会用到反射,而且java中反射的用处太多了,基本上无处不在,而且功能十分强大: 1.反射简介 反射是什么呢?一般都是很专业的说法:在 ...

  5. win8.1安装VMware Error:This product may not be installed on a comuputer that has Microsoft HyperV installed

    之前用的win7,安装虚机没遇到这问题,换了win8.1后,再安装虚机,就会出现下面的错误.没办法,还是记录一下吧. Error:This product may not be installed o ...

  6. Path特效之PathMeasure打造万能路径动效

    前面两篇文章主要讲解了 Path 的概念和基本使用,今天我们一起利用 Path 做个比较实用的小例子: 上一篇我们使用 Path 绘制了一个小桃心,我们这一篇继续围绕着这个小桃心进行展开: ----- ...

  7. 【GLSL教程】（一）图形流水线 【转】

    http://blog.csdn.net/racehorse/article/details/6593719 这是一些列来自lighthouse3d的GLSL教程,非常适合入门.我将边学习边翻译该教程 ...

  8. oracle软件安装完毕之后，如何创建数据库

    oracle软件安装完毕之后,如何创建数据库 学习了:https://zhidao.baidu.com/question/1800966379896476147.html 使用了Database Co ...

  9. .NET中XML 注释 SandCastle 帮助文件.hhp 使用HTML Help Workshop生成CHM文件

    一.摘要 在本系列的第一篇文章介绍了.NET中XML注释的用途, 本篇文章将讲解如何使用XML注释生成与MSDN一样的帮助文件.主要介绍NDoc的继承者:SandCastle. .SandCastle ...

  10. DFRobot万物互联大赛第一轮

    前言 原创文章,转载引用务必注明链接,水平有限,如有疏漏,欢迎指正. DF搞的这个比赛还挺有趣:micro:bit × OBLOQ DF创客社区玩转物联网挑战赛,一边在写文章一边在爱奇艺上看着印度电影 ...