纯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中令人发指的valueOf方法介绍
Feb 22 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
Jan 09 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
js中的reduce()函数讲解
Jan 18 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 Javascript
vue keep-alive的简单总结
Jan 25 Vue.js
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函数
2008/10/03 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
JavaScript面向对象编程
2008/03/02 Javascript
封装的原生javascript弹出层代码
2010/09/24 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
JavaScript ES 模块的使用
2020/11/12 Javascript
python 获取文件列表(或是目录例表)
2009/03/25 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
python微元法计算函数曲线长度的方法
2018/11/08 Python
python pygame模块编写飞机大战
2018/11/20 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
机械工程师求职自我评价
2013/09/23 职场文书
平面设计求职信
2014/03/10 职场文书
爱心倡议书范文
2014/05/12 职场文书
2016年教师节感言
2015/12/09 职场文书
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android
MySQL空间数据存储及函数
2021/09/25 MySQL