下面是对“原生JS实现图片无缝滚动方法(附带封装的运动框架)”的完整攻略。
实现图片无缝滚动，是需要对图片进行滚动并将其无限循环的。具体的实现思路如下：
首先，需要在HTML中创建一个容器元素，用于放置图片：
<div id="container"></div>
接下来，通过CSS样式设置容器的宽度和高度，以及内部图片的样式：
#container {
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
}
#container img {
width: 600px;
height: 400px;
display: inline-block;
position: absolute;
top: 0;
}
注意，容器的宽度需要等于所有图片的总宽度。图片的宽度需要与容器的宽度相等，高度可以自定义。
接下来，需要动态添加图片元素。在JavaScript中，可以通过创建img标签，并设置其src属性的方式，动态添加图片元素。
var container = document.getElementById('container');
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
for (var i = 0; i < images.length; i++) {
var img = document.createElement('img');
img.src = images[i];
container.appendChild(img);
}
接下来，需要设置定时器，使容器每隔一段时间移动一段距离，实现图片滚动的效果。
var container = document.getElementById('container');
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
for (var i = 0; i < images.length; i++) {
var img = document.createElement('img');
img.src = images[i];
container.appendChild(img);
}
var len = images.length;
var index = 0;
var timer = setInterval(function() {
var left = parseInt(container.style.left) || 0;
if (index == len) {
container.style.left = '0px';
index = 0;
} else {
container.style.left = left - 600 + 'px';
index++;
}
}, 2000);
在上述代码中，我们先获取了容器元素和图片数组。使用一个变量len保存图片数组的长度，变量index保存当前图片的索引值。接着，使用setInterval函数设置定时器，每隔2秒钟执行一次匿名函数。匿名函数中，通过获取容器元素的style属性中的left值，计算出下一次容器元素的left值。如果图片已经全部滚动完毕，则立即将容器元素的left值设置为0，index值重置为0；否则，将容器元素的left值设置为left-600px，index值加1。
以上代码实现了图片的滚动效果，但是在滚动到最后一张图片时，会出现一个空白的区域，因为此时容器元素已经无法再继续向左滚动。为了解决这个问题，可以在图片数组的最后添加一张与第一张图片一样的图片，这样当滚动到最后一张图片时，就直接跳转到第一张图片。
var container = document.getElementById('container');
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
// 复制并添加图片，保证无缝滚动
images.push(images[0]);
for (var i = 0; i < images.length; i++) {
var img = document.createElement('img');
img.src = images[i];
container.appendChild(img);
}
var len = images.length;
var index = 0;
var timer = setInterval(function() {
var left = parseInt(container.style.left) || 0;
if (index == len) {
container.style.left = '0px';
index = 0;
} else {
container.style.left = left - 600 + 'px';
index++;
}
}, 2000);
以上代码只实现了简单的图片无缝滚动效果，如果想要实现更自然、更流畅的滚动效果，就需要用到运动框架。下面是一个简单的运动框架，可以实现图片无缝滚动的效果。
function animate(element, target, duration) {
clearInterval(element.timer);
var start = parseInt(element.style.left) || 0;
var distance = target - start;
var steps = Math.floor(duration / 16.7);
var speed = distance / steps;
element.timer = setInterval(function() {
start += speed;
element.style.left = start + 'px';
if (Math.abs(start - target) < Math.abs(speed)) {
clearInterval(element.timer);
element.style.left = target + 'px';
}
}, 16.7);
}
var container = document.getElementById('container');
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
images.push(images[0]);
for (var i = 0; i < images.length; i++) {
var img = document.createElement('img');
img.src = images[i];
container.appendChild(img);
}
var len = images.length;
var index = 0;
var timer = setInterval(function() {
animate(container, -600 * (index + 1), 1000);
index++;
if (index == len - 1) {
index = 0;
container.style.left = '0px';
}
}, 2000);
在上述代码中，定义了一个名为animate的运动函数。接下来，在定时器中使用该函数实现图片的无缝滚动效果。
以下是两个示例说明，旨在帮助理解实现图片无缝滚动的具体过程。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单的图片无缝滚动效果</title>
<style>
#container {
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
}
#container img {
width: 600px;
height: 400px;
display: inline-block;
position: absolute;
top: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var container = document.getElementById('container');
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
for (var i = 0; i < images.length; i++) {
var img = document.createElement('img');
img.src = images[i];
container.appendChild(img);
}
var len = images.length;
var index = 0;
var timer = setInterval(function() {
var left = parseInt(container.style.left) || 0;
if (index == len) {
container.style.left = '0px';
index = 0;
} else {
container.style.left = left - 600 + 'px';
index++;
}
}, 2000);
</script>
</body>
</html>
上述代码使用了简单的JavaScript代码，实现了图片的无缝滚动效果，但是在滚动到最后一张图片时，会出现一个空白的区域。为了解决这个问题，可以在图片数组的最后添加一张与第一张图片一样的图片，这样当滚动到最后一张图片时，就直接跳转到第一张图片。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用运动框架实现更自然和流畅的图片无缝滚动效果</title>
<style>
#container {
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
}
#container img {
width: 600px;
height: 400px;
display: inline-block;
position: absolute;
top: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
function animate(element, target, duration) {
clearInterval(element.timer);
var start = parseInt(element.style.left) || 0;
var distance = target - start;
var steps = Math.floor(duration / 16.7);
var speed = distance / steps;
element.timer = setInterval(function() {
start += speed;
element.style.left = start + 'px';
if (Math.abs(start - target) < Math.abs(speed)) {
clearInterval(element.timer);
element.style.left = target + 'px';
}
}, 16.7);
}
var container = document.getElementById('container');
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
images.push(images[0]);
for (var i = 0; i < images.length; i++) {
var img = document.createElement('img');
img.src = images[i];
container.appendChild(img);
}
var len = images.length;
var index = 0;
var timer = setInterval(function() {
animate(container, -600 * (index + 1), 1000);
index++;
if (index == len - 1) {
index = 0;
container.style.left = '0px';
}
}, 2000);
</script>
</body>
</html>
上述代码使用了运动框架，实现了更自然和流畅的图片无缝滚动效果。具体实现过程是：在图片数组的最后添加一张与第一张图片一样的图片，使用animate函数实现图片的无缝滚动效果。在定时器中不断调用animate函数，控制图片的滚动和无限循环。
本文链接：http://task.lmcjl.com/news/854.html