纯js实现无缝滚动功能代码实例


Posted in Javascript onFebruary 21, 2020

这篇文章主要介绍了纯js实现无缝滚动功能代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

HTML代码

<!--父容器要使用overflow: hidden;-->
<div id="imgsList" style="height:150px;width:980px;overflow: hidden;"> 
  <!--滚动容器-->
  <div id="marquee_self">
    <ul id="marquee_ul">
      <li><img src="" width="180px" height="100px"></li>
      <li><img src="" width="180px" height="100px"></li>
      <li><img src="" width="180px" height="100px"></li>
    </ul>
  </div>
</div>

CSS代码

#marquee_self *{
  margin: 0;
  padding: 0;
}
#marquee_self{
  width: 1620px;  //所有图片长度个数*width
  height: 100px;  //图片高度
  //margin: 100px auto; 居中
  background-color: #646464;
  position: relative;
  overflow: hidden;
}
#marquee_self ul{
  position:absolute;
  left:0;
  top:0;
  overflow: hidden; //li中超出部分隐藏掉
  background-color: #3b7796; //背景色用来看问题
}
#marquee_self ul li{
  float: left;  //左对齐变为图片水平
  width: 180px;  //图片宽度
  height: 100px; //图片高度
  list-style: none; //无间隙
}

JS代码

<script type="text/javascript">
  window.onload = function(){
    var oDiv = document.getElementById('marquee_self');  //容器节点
    var oUl = document.getElementById('marquee_ul');  //ul节点
    var speed = -2;  //初始化速度,默认往左

    oUl.innerHTML += oUl.innerHTML;//ul中图片内容翻倍
    var oLi= oUl.getElementsByTagName('li'); //获取ul节点下所有li集合
    oUl.style.width = oLi.length*180+'px';//设置ul的宽度翻倍后的宽度,使图片可以放下

    /*var oBtn1 = document.getElementById('btn_left'); 左移动按钮
    var oBtn2 = document.getElementById('btn_right'); 右移动按钮*/

    function move(){
      if(oUl.offsetLeft<-(oUl.offsetWidth/2)){  //向左滚动,当向左滚动超过总ul长度一半时
        oUl.style.left = 0;  //变为从头开始
      }

      if(oUl.offsetLeft > 0){    //向右滚动,当靠右的图1移出边框时
        oUl.style.left = -(oUl.offsetWidth/2)+'px';
      }

      oUl.style.left = oUl.offsetLeft + speed + 'px';  //图片移动
    }

    /*oBtn1.addEventListener('click',function(){  //向左移动按钮点击事件
      speed = -2;
    },false);
    oBtn2.addEventListener('click',function(){  //向右移动按钮点击事件
      speed = 2;
    },false);*/

    var timer = setInterval(move,30);//全局变量 ,保存返回的定时器

    oDiv.addEventListener('mouseout', function () { //鼠标移开添加计时器
      timer = setInterval(move,30);
    },false);
    oDiv.addEventListener('mousemove', function () { //鼠标移入清除定时器
      clearInterval(timer);
    },false);
  }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js判断用户浏览器是否是XP SP2的IE6
Mar 08 Javascript
XHTML下,JS浮动代码失效的问题
Nov 12 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
jquery中each方法示例和常用选择器
Jul 08 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
Oct 27 Javascript
简述JS控制台的使用
Jul 15 Javascript
vue中,在本地缓存中读写数据的方法
Sep 21 Javascript
Web安全之XSS攻击与防御小结
Dec 13 Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 Javascript
vue中实现动态生成二维码的方法
Feb 21 #Javascript
JS如何把字符串转换成json
Feb 21 #Javascript
简单了解JS打开url的方法
Feb 21 #Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 #Javascript
如何基于js判断浏览器版本
Feb 20 #Javascript
微信小程序webSocket的使用方法
Feb 20 #Javascript
Javascript Worker子线程代码实例
Feb 20 #Javascript
You might like
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
newxtree.js代码
2007/03/13 Javascript
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
javascript 跨域问题以及解决办法
2017/07/17 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
js里面的变量范围分享
2020/07/18 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
Python标准库内置函数complex介绍
2014/11/25 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
python3.4.3下逐行读入txt文本并去重的方法
2018/04/29 Python
分析经典Python开发工程师面试题
2019/04/08 Python
python hashlib加密实现代码
2019/10/17 Python
Python表达式的优先级详解
2020/02/18 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
全球速卖通西班牙站:AliExpress西班牙
2017/10/30 全球购物
sort命令的作用和用法
2012/11/04 面试题
毕业生的求职信范文分享
2013/12/04 职场文书
十佳少年事迹材料
2014/12/25 职场文书
支教个人总结
2015/03/04 职场文书
行政人事主管岗位职责
2015/04/11 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
2015年党总支工作总结
2015/05/25 职场文书
初中班主任工作随笔
2015/08/15 职场文书
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript