本文提供了一个HTML和JavaScript代码示例，展示如何创建一个自适应图片列表，并带有响应式幻灯片效果。使用媒体查询调整图片间距，配合JavaScript实现每3秒自动切换图片。
简单的自适应代码表示网站图片列表并带 JavaScript 动效的示例：
HTML 部分：
html复制代码
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>自适应图片列表</title> | |
<style> | |
.image-container { | |
display: flex; | |
flex-wrap: wrap; | |
justify-content: center; | |
} | |
.image-container img { | |
width: 100%; | |
height: auto; | |
margin: 10px; | |
} | |
@media (max-width: 600px) { | |
.image-container img { | |
margin: 5px; | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<div class="image-container"> | |
<img src="image1.jpg" alt="Image 1"> | |
<img src="image2.jpg" alt="Image 2"> | |
<img src="image3.jpg" alt="Image 3"> | |
<!-- 更多图片 --> | |
</div> | |
<script src="script.js"></script> | |
</body> | |
</html> |
JavaScript 部分 (script.js)：
javascript复制代码
window.onload = function() { | |
const imageContainer = document.querySelector('.image-container'); | |
const images = Array.from(imageContainer.querySelectorAll('img')); | |
const slideShowInterval = 3000; // 幻灯片间隔时间（毫秒） | |
let currentIndex = 0; | |
let slideShowTimer = null; | |
function startSlideShow() { | |
slideShowTimer = setInterval(function() { | |
images[currentIndex].classList.remove('active'); | |
currentIndex = (currentIndex + 1) % images.length; // 计算下一张图片的索引 | |
images[currentIndex].classList.add('active'); // 将当前图片标记为活动状态，使其显示在页面上 | |
}, slideShowInterval); // 设置幻灯片间隔时间，每3秒切换一次图片 | |
} // startSlideShow() 函数用于启动幻灯片效果，每3秒切换一次图片，并将当前图片标记为活动状态， |
扫一扫
1342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
