首页 / JAVASCRIPT / javascript实现多张图片左右无缝滚动效果的示例代码

javascript实现多张图片左右无缝滚动效果的示例代码

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript实现多张图片左右无缝滚动效果的示例代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1660字，纯文字阅读大概需要3分钟。

内容图文

本文主要介绍了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 。

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

效果图：

javascript实现多张图片左右无缝滚动效果的示例代码 - 文章图片

示例代码：

<!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>
 <p 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>
 </p>
</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实现多张图片左右无缝滚动效果的示例代码的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的javascript实现多张图片左右无缝滚动效果的示例代码全部内容，希望文章能够帮你解决javascript实现多张图片左右无缝滚动效果的示例代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/302123.html

来源：【匿名】