原生js实现水平方向无缝滚动

水平方向无缝滚动

滚动支持图片，文字
原理 ：一个大的盒子中放置两个盒子，通过设置offsetWidth，scrollLeft的关系来实现，而且还用到定时器函数setInterval，当手指移动上去定义滚动，离开继续滚动。兼容各大浏览器。
HTML代码

 <div id="demo">
    <div id="demoin">
      <div id="demo1">
        <a href="">测试文字1</a>
        <a href="">测试文字2</a>
        <a href="">测试文字3</a>
        <a href="">测试文字4</a>
        <a href="">测试文字5</a>
        <a href="">测试文字7</a>
        <a href="">测试文字8</a>
        <a href="">测试文字9</a>
        <a href="">测试文字10</a>
        <a href="">测试文字11</a>
        <a href="">测试文字12</a>
        <a href="">测试文字13</a>
        <a href="">测试文字14</a>
        <a href="">测试文字15</a>
        <a href="">测试文字16</a>
        <a href="">测试文字17</a>
      </div>
      <div id="demo2"></div>
    </div>
  </div>

CSS代码

#demo{
      width:1000px;
      height:30px;
      overflow:hidden;
      line-height:30px;
      font-size:13px;
      font-family:'宋体';
      background:#ddd url(images/notice.png) no-repeat 25px center;
      color:#0C77CF;
      font-weight:bold;
      margin: 0 auto;
    }
    #demoin {
      width: 900px;
      height: 30px;
      margin: 0 auto;
      white-space: nowrap;
      overflow: hidden;
    }
    #demo #demo1, #demo #demo2{display:inline}

Javascript代码

 window.onload = function(){
    scrollLeft();
  };
  function scrollLeft(){
    var speed = 20;
    var tab = document.getElementById('demoin');
    var tab1 = document.getElementById('demo1');
    var tab2 = document.getElementById('demo2');
    tab2.innerHTML = tab1.innerHTML;
    function Marquee(){
      if(tab2.offsetWidth - tab.scrollLeft <=0) {
        tab.scrollLeft = 0;
      }else{
        tab.scrollLeft ++;
      }

    }
    var timer = setInterval(Marquee,speed);
    tab.onmouseover = function(){
      clearInterval(timer);
    };
    tab.onmouseout = function(){
      timer = setInterval(Marquee,speed);
    }
  }

效果图：

效果就是一直滚动。

注意：内容的宽度必须大于容器的宽度，否则无法滚动，测试文字一般是使用ajax后台获取。

赞 (0)

相关推荐

  • 原生js实现无缝轮播图效果

    话不多说,请看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝轮播图-原生js封装</title> <link rel="shortcut icon" href="../public/image/favicon.ico" type="ima

  • 原生JS实现图片轮播效果

    之前页面需要图片轮播的时候,都是直接在网上找一个插件,然后自己动手改一下,把图片的路径改成自己图片的路径,然后万事大吉.后来觉得这样并不能提高自己的前端水平,于是乎,自己动手写了一个图片轮播的小demo,用的是jquery,小弟前端小白一个,各位前端大神看了之后,望批评指正. 我的思路是这样的,定义两个变量,一个用来保存当前页码$index,一个用来保存上一页的页码$exdex,首先判断$index和$exdex的大小,如果$index大于$exdex,说明是朝左翻页,反之,就是朝右翻页.如果是

  • 原生JS实现风箱式demo,并封装了一个运动框架(实例代码)

    声明,该DEMO依托于某个培训机构中,非常感谢这个培训结构.话不多说,现在开始改demo的制作. 首先,在前端的学习过程中,轮播图是我们一定要学习的,所以为了更加高效的实现各种轮播图,封装了一个运动的框架. function getStyle(obj,attr) { if(obj.currentStyle){ return obj.currentStyle[attr];//为了获取IE下的属性值 }else{ return window.getComputedStyle(obj,null)[at

  • JS简单封装的图片无缝滚动效果示例【测试可用】

    本文实例讲述了JS简单封装的图片无缝滚动效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="

  • 原生JS实现图片无缝滚动方法(附带封装的运动框架)

    话说轮播图效果是前端er学习JS的必经之路啊,很多同学写的第一个JS效果应该就是它了,在各大网站我们都会经常见到,但是无缝滚动运动效果的轮播图,对于小白们来说还是有一定难度的. 我们来看看思路吧~ 首先我们要实现的效果有以下几点: 小圆点:点击小圆点显示与之对应的图片 向左和向右按钮:点击向左按钮图片向后运动,点击向右按钮图片向前运动 定时器:每隔 2s 自动播放 主要难点在于: 当图片运动到最后一张,点击向右的按钮时,应该显示第一张: 当前显示的是第一张,点击向左的按钮时,应该显示最后一张:

  • 原生js实现水平方向无缝滚动

    原生js实现水平方向无缝滚动

    水平方向无缝滚动 滚动支持图片,文字 原理 :一个大的盒子中放置两个盒子,通过设置offsetWidth,scrollLeft的关系来实现,而且还用到定时器函数setInterval,当手指移动上去定义滚动,离开继续滚动.兼容各大浏览器. HTML代码 <div id="demo"> <div id="demoin"> <div id="demo1"> <a href="">测试

  • 原生Js 实现的简单无缝滚动轮播图的示例代码

       简单无缝滚动轮播图存在很多漏洞,就是后期增加图片时会很不方便,需要改动的地方也很多,耦合性也很强,只适用于一部分程序,所以我们可以通过改动图片结构和计算折算点的方式,升级代码.       原简单的滚动轮播代码 <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &

  • 原生JS实现简单的无缝自动轮播效果

    最近在不断的加强巩固js.在学习jq和vue之后发现很多东西其实都是不明所以,有些底层的东西自己不懂,到头来也只是一昧的使用,一直在用别人的东西,对自己的成长帮助也不大. 万丈高楼平地起,基础打扎实了学什么都快,而且我觉得用原生的代码写完好像自己有点小成就感的.现在记录一下今天复习的原生js无缝轮播吧. 先上一张自拍镇楼,哈哈哈 首先先说一下思路吧,首先任意张图片以ul的形式保存显示,上代码吧 <div id="wrap"> <ul id="ul"

  • js实现文字列表无缝滚动效果

    本文实例为大家分享了js文字列表无缝滚动的具体代码,供大家参考,具体内容如下 HTML代码: <div id="rule"> <div class="list" id="list"> <p>用户185****0000 获得XXX优惠券</p> <p>用户185****0000 获得XXX优惠券</p> <p>用户185****0000 获得XXX优惠券</p

  • 走马灯效果代码js appendChild实现的无缝滚动

    *{border:1px solid blue} a{display:block;font-size:10px}; 1,河北, 2,辽宁 3,山东, 4,河南 var t=setInterval(myfunc,1000) function myfunc(){ d.appendChild(d.firstChild)} d.onmouseover=function(){clearInterval(t)} d.onmouseout=function(){t=setInterval(myfunc,100

  • js轮播图无缝滚动效果

    在做轮播图时如果首尾不能连起来的话,效果会有点丑,下面介绍一种我常用的方法: 先文字说明一下: 如果要展示5张图,分别为1,2,3,4,5  那么在代码的引入中是这样的:1,2,3,4,5,1 按顺序的轮播在此就不多说,重点说的是5>1和1>5的轮播 i  表示当前图片的索引 pre 表示上一张图片的按钮 next 表示下一张图片的按钮 ul 表示图片列表 (1)  5>1>2...   当"next"按钮从5到1时按顺序正常轮播,当前图片为第二个"1

  • 10行原生JS实现文字无缝滚动(超简单)

    废话不多说,直接上代码 <section class="pro_quota_tip"> <div class="tip_box"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external

  • js实现可控制左右方向的无缝滚动效果

    js实现可控制左右方向的无缝滚动效果

    本文实例为大家分享了无缝滚动效果JavaScript代码实现,供大家参考,具体内容如下] 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>zzzz</title> <style> *{ margin: 0; padding:0; } body{ width: 1000px; margin: 100px a

  • 原生js无缝轮播插件使用详解

    这篇博文主要讲如何使用原生js来实现一个兼容 IE9+ 的无缝轮播图.主要知识点如下: 面向对象 js优化之节流函数 js运动 效果 html结构 <div class="sliders-wraper" id="rotation-1"> <ul class="sliders clear"> <li class="slider" style="background:purple"

随机推荐