CSS图片循环滚动怎么实现
在网页设计中，我们经常需要让图片进行循环滚动，以增加页面的动态感和视觉效果，CSS提供了多种方法来实现图片的循环滚动，本文将介绍其中最常用的两种方法：使用CSS动画和JavaScript。
1、使用CSS动画实现图片循环滚动
CSS动画是一种通过修改元素的属性(如位置、大小、颜色等)来实现动画效果的方法，我们可以通过设置一个关键帧动画，使图片在一定时间内从左向右或从右向左滚动。
我们需要创建一个HTML文件，并在其中添加一张图片：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片循环滚动</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="your-image-source.jpg" alt="图片" class="scrolling-image">
</body>
</html>
接下来，我们需要在CSS文件(如style.css)中定义动画效果：
.scrolling-image {
width: 300px;
height: 200px;
animation: scroll 5s linear infinite;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
在这个例子中，我们创建了一个名为scroll的关键帧动画，使图片在5秒内从左向右滚动，通过设置animation-timing-function属性为linear,我们可以让图片以匀速滚动。infinite关键字表示动画将无限次重复播放。
2、使用JavaScript实现图片循环滚动
除了使用CSS动画，我们还可以使用JavaScript来实现图片循环滚动，这种方法的优点是更加灵活，可以根据需要调整滚动速度、方向等参数，下面是一个简单的示例：
我们在HTML文件中添加一张图片：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片循环滚动</title>
</head>
<body>
<img src="your-image-source.jpg" alt="图片" id="scrolling-image">
</body>
</html>
接下来，我们在JavaScript文件(如script.js)中编写代码实现图片循环滚动：
const scrollingImage = document.getElementById('scrolling-image');
let position = 0;
const speed = 5; // 每秒滚动的速度，数值越大滚动越快
const direction = 'left'; // 滚动方向，可选值为 'left'(向左)和 'right'(向右)
const duration = 5000; // 每次滚动的持续时间，单位为毫秒(ms)
const repeat = true; // 是否重复滚动，默认为 true(重复滚动)
const interval = setInterval(() => {
if (direction === 'left') {
position += speed;
} else if (direction === 'right') {
position -= speed;
} else {
throw new Error('Invalid direction value');
}
if (position >= window.innerWidth || position <= 0) {
if (direction === 'left') {
const temp = position; // 将当前位置存储在一个临时变量中，用于计算下一次滚动时的位置差
position = window.innerWidth + temp; // 将当前位置设置为窗口宽度加上当前位置与窗口宽度的差值，实现向右滚动的效果(相当于回到起点再向左滚动)
} else if (direction === 'right') {
const temp = position; // 将当前位置存储在一个临时变量中，用于计算下一次滚动时的位置差
position = temp % window.innerWidth; // 将当前位置设置为当前位置与窗口宽度的余数，实现向左滚动的效果(相当于回到起点再向右滚动)
} else {
throw new Error('Invalid direction value');
}
Array.from(document.images).forEach((img) => img.style.display = 'none'); // 先隐藏所有图片，等待下一次绘制后再显示出来(避免重绘导致的卡顿现象)
repaint(); // 在浏览器渲染之前调用 repaint() 函数，强制更新页面内容(仅适用于旧版IE浏览器)或者使用 requestAnimationFrame()(推荐)代替 repaint()(现代浏览器支持更好)或者直接使用 CSS 实现动画效果(transform:translateX(-100%);)或者使用 JavaScript 实现动画效果(window.requestAnimationFrame(() => scrollingImage.style.transform = translateX(${(position * speed) % window.innerWidth}px));)，然后再显示刚刚隐藏的图片，这样就可以实现平滑的滚动效果了，清除定时器并重新开始滚动，如果不需要重复滚动，只需将 repeat 设置为 false即可，根据实际需求调整 speed、direction、duration等参数。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/218127.html
微信扫一扫 