纯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 相关文章推荐
bcastr2.0 通用的图片浏览器
Nov 22 Javascript
总结AJAX相关JS代码片段和浏览器模型
Aug 15 Javascript
js 表格隔行颜色
Dec 02 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
Javascript表格翻页效果的具体实现
Oct 05 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 Javascript
js中最容易被忽视的事件问题大总结
May 15 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
JavaScript实现动态留言板
Mar 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+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
js原型链原理看图说明
2012/07/07 Javascript
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
基于node实现websocket协议
2016/04/25 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
Node.js中文件操作模块File System的详细介绍
2017/01/05 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
Vue实现的父组件向子组件传值功能示例
2019/01/19 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
Python文档生成工具pydoc使用介绍
2015/06/02 Python
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
在Python中执行系统命令的方法示例详解
2017/09/14 Python
Python实现简单的HttpServer服务器示例
2017/09/25 Python
python求最大连续子数组的和
2018/07/07 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
python爬虫 urllib模块url编码处理详解
2019/08/20 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
解决import tensorflow导致jupyter内核死亡的问题
2021/02/06 Python
美国网上书店:Barnes & Noble
2018/08/15 全球购物
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
"引用"与多态的关系
2013/02/01 面试题
工程造价专业大学生职业规划范文
2014/03/09 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python