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

2024-08-05 19:03:18

这篇文章主要介绍了纯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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

基于vue.js无缝滚动效果

一个简单的基于vue.js的无缝滚动 :feet:在线文档demo :ear_of_rice:小demo :blue_book:English Document 安装 NPM npm install vue-seamless-scroll --save 使用 ES6 详情的demo页面 example-src/App.vue // **main.js** import Vue from 'vue' import scroll from 'vue-seamless-scroll' Vue.use(
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
js实现无缝滚动双图切换效果

本文记录的是在html中写两个img实现多张图片的无缝滚动,供大家参考,具体内容如下 html结构如下: <div class="wrap"> <ul class="list"> <li> <img src="img/img0.png"> </li> <li> <img src="img/img1.png"> </li> </
JS实现简单的文字无缝上下滚动功能示例

本文实例讲述了JS实现简单的文字无缝上下滚动功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="" /> <title>文字列表无缝滚动代码</title> <style type="text/cs
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图片无缝滚动插件使用详解

本文实例为大家分享了js图片无缝滚动插件的具体代码,供大家参考,具体内容如下 css ul { list-style: none; margin: 0; padding: 0; } .slide-img-ul { white-space: nowrap; } .slide-img-ul>li { width: 100px; height: 100px; margin: 10px; display: inline-block; vertical-align: middle } .slide-img
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解

本文实例讲述了JavaScript学习笔记之基于定时器实现图片无缝滚动功能.分享给大家供大家参考,具体如下: 一.无缝滚动理论基础基础知识 1.setInterval(function,time).clearInterval(timer) setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 setInterval() 返回的 ID 值可用作 clea
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实现无缝滚动功能代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 HTML代码  <div id="imgsList" style="height:150px;width:980px;overflow: hidden;">  <div id="marqu
原生JS实现汇率转换功能代码实例

代码如下 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Comp
基于JS实现无缝滚动思路及代码分享

原理: 1.给ul一个绝对定位使其脱离文档流,left设置为0,把图片塞进ul里,编写一个"移动"函数,函数功能能够使ul的left以一个正速度向右跑动, 2.设置一个定时器,让"移动"函数每30(参数可变)毫秒执行一次 3.因为ul的长度会"跑"完,此时可以使ul的content也就是img增加一倍, oUl.innerHTML +=oUl.innerHTML; 4.此时因为ul的content增加,其width也会随着增大,根据实际项目展示图
JS平滑无缝滚动效果的实现代码

本文我们实现纯JS方式的滚动广告效果. 先show一下成品: 首先是网页样式: #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 1280px; height:200px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 { float: left; } #demo2 {
JS与HTML结合使用marquee标签实现无缝滚动效果代码

最近在做一个前端开发的项目,需要实现无缝滚动效果,上下左右无缝滚动.下面小编把实现代码分享到我们平台,需要的朋友可以参考下,有bug欢迎提出,共同学习进步. 具体代码如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns=&
JavaScript无缝滚动效果的实例代码

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!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" xml:lang="en"&
基于 Immutable.js 实现撤销重做功能的实例代码

浏览器的功能越来越强大,许多原来由其他客户端提供的功能渐渐转移到了前端,前端应用也越来越复杂.许多前端应用,尤其是一些在线编辑软件,运行时需要不断处理用户的交互,提供了撤消重做功能来保证交互的流畅性.不过为一个应用实现撤销重做功能并不是一件容易的事情. Redux官方文档中介绍了如何在 redux 应用中实现撤销重做功能.基于 redux 的撤销功能是一个自顶向下的方案:引入 redux-undo 之后所有的操作都变为了「可撤销的」,然后我们不断修改其配置使得撤销功能变得越来越好用(这也是 r
JS实现“全选”和"全不选"功能代码实例

这篇文章主要介绍了JS实现"全选"和"全不选"功能代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head&g
js实现无缝滚动特效

本文实例为大家介绍了js实现无缝滚动特效需要做到的功能,以及关键性js代码,分享给大家供大家参考,具体内容如下运行效果图: 结合下学了的知识,做个模拟的综合性扩展练习~~ 大致功能如下: 1.点开html后,图片自动移动展示 2.点击左右方向,可以改变图片移动的方向(改变left的值,正负) 3.鼠标移入移出图片后,图片暂停移动(setInterval,clearInterval) 4.鼠标移到图片上,高亮(a:hover) 5.点击小图, 下面的大图会改变 6.文字区域随着图片的变化而变
原生JavaScript实现的无缝滚动功能详解

本文实例讲述了原生JavaScript实现的无缝滚动功能.分享给大家供大家参考,具体如下: 无缝轮播(原生JavaScript) 一:HTML部分: <div class="box" id="box"> <ul class="J_XSlide list"> <li class="J_tabContent"><a href="#" rel="external

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

相关推荐

随机推荐