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

来源：懂视网责编：小OO 时间：2020-11-27 20:23:46

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。此时请注意盒子里面数字和颜色的变化。效果图。示例代码。

推荐度：

点击下载本文 文档为doc格式

导读结构：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实现多张图片左右无缝滚动效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧

结构：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>
 <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实现多张图片左右无缝滚动效果的示例代码

推荐度：

点击下载本文 文档为doc格式

标签：图片 js 代码

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐