JS特效篇：跑马灯轮播图
JS特效篇：跑马灯轮播图
- 前言
- 效果预览
- 代码实现
- 代码说明
-
- HTML结构
-
- HTML结构说明
- CSS样式
-
- CSS样式说明
- JS逻辑
-
- JS逻辑说明
- 结语
前言
本文将讲述如何通过CSS+JS，实现一个跑马灯轮播图，实现图片无缝循环滚动，支持鼠标悬停暂停、图片缩放交互等功能，并详细讲解其中的原理和关键代码。
效果预览
代码实现
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跑马灯轮播图title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #1a1a1a;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.carousel-container {
width: 90%;
max-width: 1400px;
height: 200px;
overflow: hidden;
position: relative;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.carousel-track {
display: flex;
position: absolute;
top: 0;
left: 0;
height: 100%;
animation: scrollLeft 30s linear infinite;
}
.carousel-track:hover {
animation-play-state: paused;
}
.carousel-track img {
height: 100%;
width: auto;
object-fit: cover;
margin-right: 15px;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease;
}
.carousel-track img:hover {
transform: scale(1.02);
}
@keyframes scrollLeft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-50% - 7.5px));
/* 移动距离为总宽度的一半减去间距 */
}
}
style>
head>
<body>
<div class="carousel-container">
<div class="carousel-track" id="carousel">
<img src="https://picsum.photos/400/200?random=1" alt="Slide 1">
<img src="https://picsum.photos/400/200?random=2" alt="Slide 2">
<img src="https://picsum.photos/400/200?random=3" alt="Slide 3">
<img src="https://picsum.photos/400/200?random=4" alt="Slide 4">
<img src="https://picsum.photos/400/200?random=5" alt="Slide 5">
<img src="https://picsum.photos/400/200?random=6" alt="Slide 6">
<img src="https://picsum.photos/400/200?random=7" alt="Slide 7">
<img src="https://picsum.photos/400/200?random=8" alt="Slide 8">
<img src="https://picsum.photos/400/200?random=9" alt="Slide 9">
<img src="https://picsum.photos/400/200?random=10" alt="Slide 10">
<img src="https://picsum.photos/400/200?random=1" alt="Slide 1">
<img src="https://picsum.photos/400/200?random=2" alt="Slide 2">
<img src="https://picsum.photos/400/200?random=3" alt="Slide 3">
<img src="https://picsum.photos/400/200?random=4" alt="Slide 4">
<img src="https://picsum.photos/400/200?random=5" alt="Slide 5">
<img src="https://picsum.photos/400/200?random=6" alt="Slide 6">
<img src="https://picsum.photos/400/200?random=7" alt="Slide 7">
<img src="https://picsum.photos/400/200?random=8" alt="Slide 8">
<img src="https://picsum.photos/400/200?random=9" alt="Slide 9">
<img src="https://picsum.photos/400/200?random=10" alt="Slide 10">
div>
div>
<script>
// 获取轮播容器和轨道
const carousel = document.getElementById('carousel');
// 计算动画持续时间（根据图片数量动态调整）
const images = carousel.querySelectorAll('img');
const baseDuration = 30; // 基础秒数
const adjustedDuration = baseDuration * (1 + images.length / 20); // 根据图片数量调整
// 设置动画持续时间
carousel.style.animationDuration = `${adjustedDuration}s`;
// 鼠标悬停效果
carousel.addEventListener('mouseenter', () => {
carousel.style.animationPlayState = 'paused';
});
carousel.addEventListener('mouseleave', () => {
carousel.style.animationPlayState = 'running';
});
script>
body>
html>
代码说明
HTML结构
<div class="carousel-container">
<div class="carousel-track" id="carousel">
<img src="https://picsum.photos/400/200?random=1" alt="Slide 1">
<img src="https://picsum.photos/400/200?random=2" alt="Slide 2">
<img src="https://picsum.photos/400/200?random=3" alt="Slide 3">
<img src="https://picsum.photos/400/200?random=4" alt="Slide 4">
<img src="https://picsum.photos/400/200?random=5" alt="Slide 5">
<img src="https://picsum.photos/400/200?random=6" alt="Slide 6">
<img src="https://picsum.photos/400/200?random=7" alt="Slide 7">
<img src="https://picsum.photos/400/200?random=8" alt="Slide 8">
<img src="https://picsum.photos/400/200?random=9" alt="Slide 9">
<img src="https://picsum.photos/400/200?random=10" alt="Slide 10">
<img src="https://picsum.photos/400/200?random=1" alt="Slide 1">
<img src="https://picsum.photos/400/200?random=2" alt="Slide 2">
<img src="https://picsum.photos/400/200?random=3" alt="Slide 3">
<img src="https://picsum.photos/400/200?random=4" alt="Slide 4">
<img src="https://picsum.photos/400/200?random=5" alt="Slide 5">
<img src="https://picsum.photos/400/200?random=6" alt="Slide 6">
<img src="https://picsum.photos/400/200?random=7" alt="Slide 7">
<img src="https://picsum.photos/400/200?random=8" alt="Slide 8">
<img src="https://picsum.photos/400/200?random=9" alt="Slide 9">
<img src="https://picsum.photos/400/200?random=10" alt="Slide 10">
div>
div>
HTML结构说明
上述代码中：
carousel-container控制容器大小和溢出隐藏。- 轮播轨道包含两组相同图片，实现无缝循环。
carousel-track作为绝对定位的滚动载体。
CSS样式
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #1a1a1a;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.carousel-container {
width: 90%;
max-width: 1400px;
height: 200px;
overflow: hidden;
position: relative;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.carousel-track {
display: flex;
position: absolute;
top: 0;
left: 0;
height: 100%;
animation: scrollLeft 30s linear infinite;
}
.carousel-track:hover {
animation-play-state: paused;
}
.carousel-track img {
height: 100%;
width: auto;
object-fit: cover;
margin-right: 15px;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease;
}
.carousel-track img:hover {
transform: scale(1.02);
}
@keyframes scrollLeft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-50% - 7.5px));
/* 移动距离为总宽度的一半减去间距 */
}
}
style>
CSS样式说明
在上述代码中：
.carousel-container定义了一个外层轮播容器，并隐藏超出部分。.carousel-track为实际的轮播区域，并展示图片。scrollLeft定义滚动动画，动画移动距离为总宽度的一半（50%），因轨道包含两组图片，滚动一半即可实现无缝衔接。
JS逻辑
<script>
// 获取轮播容器和轨道
const carousel = document.getElementById('carousel');
// 计算动画持续时间（根据图片数量动态调整）
const images = carousel.querySelectorAll('img');
const baseDuration = 30; // 基础秒数
const adjustedDuration = baseDuration * (1 + images.length / 20); // 根据图片数量调整
// 设置动画持续时间
carousel.style.animationDuration = `${adjustedDuration}s`;
// 鼠标悬停效果
carousel.addEventListener('mouseenter', () => {
carousel.style.animationPlayState = 'paused';
});
carousel.addEventListener('mouseleave', () => {
carousel.style.animationPlayState = 'running';
});
script>
JS逻辑说明
- 动态时长计算：通过
images.length获取图片总数，公式baseDuration * (1 + n/20)使动画时长随图片数量线性增长，避免图片过多时滚动过快。 - 事件监听：利用
mouseenter和mouseleave实现交互暂停功能
结语
本文主要介绍了如何通过CSS+JS实现一个跑马灯轮播图，在后面的文章中，我会继续探讨其他类型的轮播图，你还知道哪些轮播图？欢迎在评论区留言分享！