一：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. 启动tomcat服务器自动执行一个方法

    第一步:配置web.xml文件 添加如下代码 <servlet> <servlet-name>Timer</servlet-name> <servlet-cl ...

  2. es6 解构写法：给变量取别名

    在变量后面加一个: var {f: foo} = {f: 5}; foo == 5 // true

  3. HDU 5727.Necklace-二分图匹配匈牙利

    好久没写过博客了,把以前的博客补一下. Necklace Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 65536/65536 K ( ...

  4. (21)Oracle表查询进阶

    转到基本查询 一.多表查询 笛卡尔积:每张表的列数相加,行数相乘. 连接条件:得出笛卡尔积后需要用where条件筛选出正确的数据.连接条件至少需要n张表减1个 1.等值连接 连接条件为等号 selec ...

  5. Fiddler简介以及web抓包

    Fiddler简介以及web抓包 版权声明:本文为博主原创文章,未经博主允许不得转载. 一.Fiddler简介简单来说,Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联 ...

  6. iOS 动画笔记 (二）

    有它们俩你就够了! 说明:下面有些概念我说的不怎么详细,网上实在是太多了,说了我觉得也意义不大了!但链接都给大家了,可以自己去看,重点梳理学习写动画的一个过程和一些好的博客! 一:说说这两个三方库,C ...

  7. bzoj1455&&luogu2713罗马游戏

    罗马游戏 题目描述 罗马皇帝很喜欢玩杀人游戏. 他的军队里面有n个人,每个人都是一个独立的团.最近举行了一次平面几何测试,每个人都得到了一个分数. 皇帝很喜欢平面几何,他对那些得分很低的人嗤之以鼻. ...

  8. Algorithm | hash

    A basic requirement is that the function should provide a uniform distribution of hash values. A non ...

  9. eclipse启动Tomcat时报错：严重: Exception loading sessions from persistent storage

    我的项目工程是Spring+hibernate+structs  1.0,最近启动tomcat时多次遇到如下异常: 严重: IOException while loading persisted se ...

  10. 深入理解 JavaScript Function

    1.Function Arguments JavaScript 函数的参数 类型可以是 复杂类型如  Object or Array 和简单类型 String Integer null undefin ...