纯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 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
firefox firebug中文入门教程 脚本之家新年特别版
Jan 02 Javascript
基于jQuery的星级评分插件
Aug 12 Javascript
jquery购物车实时结算特效实现思路
Sep 23 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
图解js图片轮播效果
Dec 20 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
JS实现查找数组中对象的属性值是否存在示例
May 24 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 Javascript
jquery实现穿梭框功能
Jan 19 jQuery
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 翻页 实例代码
2009/08/07 PHP
php类中private属性继承问题分析
2012/11/01 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
jquery遍历checkbox介绍
2014/02/21 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
微信上传视频文件提示(推荐)
2018/11/22 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
python查看zip包中文件及大小的方法
2015/07/09 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
python的pip安装以及使用教程
2018/09/18 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
python读写文件write和flush的实现方式
2020/02/21 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
python 绘制场景热力图的示例
2020/09/23 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python
Python实现日志实时监测的示例详解
2022/04/06 Python