javascript实现多张图片左右无缝滚动效果

2024-04-21 08:31:17

结构：box包含ul，ul包含4个li；ul绝对定位。

复制li-1、li-2到第li-4后面，为了区分于li-1、li-2，内容改为li-5、li-6，颜色不变。此时ul包含6个li。

需要注意的是，移动的是ul这个大盒子而不是li。

原理：当ul 绝对定位的left 值等于（li-1+li-2+li-3+li-4）的宽度时，利用JavaScript快速复原left 值为0 。

此时请注意盒子里面数字和颜色的变化！

效果图：

示例代码：

<!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-Compatible" content="ie=edge">
 <title>Document</title>
 <style media="screen">
  *{
   padding: 0;
   margin: 0;
  }
  ul,li {
   list-style: none;
  }
  img {
   vertical-align: top;
  }
  #box{
   width: 400px;
   height: 100px;
   margin: 100px auto;
   background-color: pink;
   position: relative;
   overflow: hidden;
  }
  #box ul {
   width: 2000px;
   position: absolute;
   left: 0;
   top: 0;
  }
  #box li {
   float: left;
  }
  .aa {
   width: 200px;
   height: 100px;
  }
  .li-1{
   background-color: #f6e659;
  }
  .li-2{
   background-color: #57fa4f;
  }
  .li-3{
   background-color: #3a8ef1;
  }
  .li-4{
   background-color: #c057f1;
  }
 </style>
</head>
<body>
 <div id="box">
  <ul>
   <li class="li-1 aa">li-1</li>
   <li class="li-2 aa">li-2</li>
   <li class="li-3 aa">li-3</li>
   <li class="li-4 aa">li-4</li>
   <li class="li-1 aa">li-5</li>
   <li class="li-2 aa">li-6</li>
  </ul>
 </div>
</body>
</html>
<script type="text/javascript">
 var box = document.getElementById("box");
 var ul = box.children[0];
 var num = 0;
 timer = setInterval(fn,10);
 function fn() {
  num--;
  num <= -800 ? num = 0 : num;
  ul.style.left = num + "px";
 }
</script>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

javascript实现的左右无缝滚动效果

本文实例讲述了javascript实现的左右无缝滚动效果.分享给大家供大家参考,具体如下: 前面介绍过图片左右滚动,不过图片是间歇性的一张一张滚动,今天介绍的是几张图片一起进行无缝滚动,这是一个常用的 js 效果. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>无缝滚动--左右</title> &
js 实现无缝滚动兼容IE和FF

原理解析: 1.首先给容器设定高度或宽度,比如ul,设置ul高40px;overflow:hidden: 2.容器高度设定后,内容的高度超出40px,超过部分溢出,被隐藏,scrollTop属性可用,这一点可以用overflow:scroll来看效果: 3.改变容器的scrollTop(上下滚动)属性的值,让内容上下移动一个节点的位置(滚动的原理): 4.到滚动的高度scrollTop大于或等于要滚动节点的高度时,设置scrollTop=0,并把把子节点树中的第一个移动到最后,重新开始滚动,无间
原生js实现水平方向无缝滚动

水平方向无缝滚动滚动支持图片,文字原理 :一个大的盒子中放置两个盒子,通过设置offsetWidth,scrollLeft的关系来实现,而且还用到定时器函数setInterval,当手指移动上去定义滚动,离开继续滚动.兼容各大浏览器. HTML代码 <div id="demo"> <div id="demoin"> <div id="demo1"> <a href="">测试
简单实现js间歇或无缝滚动效果

间歇.无缝滚动效果(用gif录制的效果不是很好,有兴趣的可以down代码),具体内容如下代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动</title> <style> *{margin:0;padding:0;} .box{width: 500px;height: 400p
彻底搞懂JS无缝滚动代码

在做个东西要滚动代码而且是无缝的搞了半天还是不行决心一定要把这个问题搞定经过研究也不难代码如下: 程序代码复制代码代码如下: <div id=demo style=overflow:auto;height:180;width:200;background:#009900;color:#006600> <table align=top> <tr> <td id=demo1 valign=top> <p>aaaaaaaaaa
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox

div+css+javascript 实现无缝滚动,marquee无缝滚动,无缝滚动,兼容firefox 用marquee实现首尾相连循环滚动效果(仅IE): 复制代码代码如下: <marquee behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount=&quo
angularjs实现文字上下无缝滚动特效代码

最近没有项目做,于是闲暇之余学习了下angularjs知识,然后写了一个文字上下无缝滚动的例子,主要写的是一个小小的指令. css代码: 主要控制样式 <style type="text/css"> *{margin: 0px;padding: 0px;} .slide {width: 200px;height:200px;border:1px solid #dcdcdc;margin: 0 auto;margin-top: 50px;overflow: hidden;}
关于网页中的无缝滚动的js代码

随便打开一个网页,基本上都会看到无缝滚动或者轮播图,比如淘宝还有360官网的首页观察这些轮播图可以发现图片可以来回循环地切换,那么是怎样做到的呢? 做到轮播图或者说无缝滚动主要有两种方式,一种是通过对图片的明暗即透明图的改变来显示或隐藏图片,另一种是通过运动框架,将图片显示在可视区域.这两种方式都会用到同一个东西,那就是定时器. JavaScript中的定时器有两种,1.setInterval();2.setTimeout();相对应的关闭定时器也有两种方法,clearInterval()和c
javascript实现文字无缝滚动

效果如图: html:( 一个div 包裹两个ul ) <div style="position: absolute; left: 500px; top: 200px; background-color: white; height: 140px; width: 400px; border: solid; 1px; overflow: hidden;" id="box"> <ul id="ul1"> <li>&
javascript实现多张图片左右无缝滚动效果

结构:box包含ul,ul包含4个li:ul绝对定位. 复制li-1.li-2到第li-4后面,为了区分于li-1.li-2,内容改为li-5.li-6,颜色不变.此时ul包含6个li. 需要注意的是,移动的是ul这个大盒子而不是li. 原理:当ul 绝对定位的left 值等于(li-1+li-2+li-3+li-4)的宽度时,利用JavaScript快速复原left 值为0 . 此时请注意盒子里面数字和颜色的变化! 效果图: 示例代码: <!DOCTYPE html> <html la
纯javascript实现四方向文本无缝滚动效果

实现一个文本无缝滚动的效果: <!DOCTYPE html>   <!--[if IE 8 ]
原生javascript实现图片无缝滚动效果

图片水平无缝滚动效果在大量的网站都有应用,特别是一些企业网站在展示产品的时候,因为是动态效果,所以能够给网站增色不少,相比静态图片展示更能够吸引用户的注意力,下面就通过实例代码介绍一下如何实现此效果. 代码如下: <html> <head> <meta charset="gb2312"> <title>我们</title> <style type="text/css"> #demo{ backg
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"&
javascript实现的上下无缝滚动效果

本文实例讲述了javascript实现的上下无缝滚动效果.分享给大家供大家参考,具体如下: 前面介绍了JS左右无缝滚动效果,现在做下无缝滚动--上下的效果.其他代码和左右的差不多,只是改变的是 offsetTop 的值,并且不需要计算 ul 整体的宽度了. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>无缝滚
基于JavaScript实现无缝滚动效果

本文实例为大家分享了JavaScript实现无缝滚动效果展示的具体代码,供大家参考,具体内容如下首先应该区分样式中的绝对定位和相对定位,一般来说,移动的单位为绝对定位,在这个实例中,移动的Ul就是绝对定位 ,否则它根本无法滚动,而它相对于div1滚动 ,则div1就作为他的相对定位. oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;这段代码是实现无缝滚动的核心,使之可以在不论左右滚动的时候都有下一步图片接上去. 在操作或者进行比较的时候,都要用offset取
JavaScript实现简单精致的图片左右无缝滚动效果

本文实例讲述了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"
javascript实现文字无缝滚动效果

本文实例为大家分享了文字无缝滚动效果,供大家参考,具体内容如下 html <dl id="marquee" class="marquee"> <dt> <ul class="right-content"> <li> <a href="#" rel="external nofollow" rel="external nofollow"
javascript单张多张图无缝滚动实例代码

我们会看到很多的网站上会使用多张图片无缝滚动的效果. 下面我就介绍几种纯JS实现多张图片的无缝滚动,并实现鼠标移到图片上运动停止的效果,可以控制图片左右滚动. 1.效果展示: <!DOCTYPE html> <html> <head> <title>无缝滚动</title> </head> <style type="text/css"> *{margin: 0;padding: 0;} #div1{po

javascript实现多张图片左右无缝滚动效果

相关推荐

随机推荐