<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>-</title>
<style>
body {
margin:
0;
padding:
0;
overflow: hidden;
}
.container {
position: relative;
display: flex;
width: 192
0px;
height: 9
00px;
overflow: hidden;
cursor: pointer;
top:22
0px;
}
.box {
position: absolute;
width: 5
00px;
white-space: nowrap;
/* left:
0; */
text-align: center; /* 让内容居中 */
}
.image-container {
/* border: 1px solid #ddd; */
border-radius: 4px;
padding: 5px;
text-align: center;
transition: transform
0.3s;
}
.image-container img {
max-width: 1
00%;
height: auto;
max-height: 15
0px;
}
.loading {
text-align: center;
font-size: 18px;
color: #666;
margin: 2
0px
0;
}
.bg {
width: 192
0px;
height: 1
08
0px;
background-image: url(img/bg.jpg);
}
</style>
</head>
<body>
<div class="bg">
<div id="loading" class="loading">正在加载图片...</div>
<div class="container" id="container"></div>
<div style="float: right; margin-right: 1
00px;margin-top: 2
0px; position: relative;z-index: 999;">
<a href="index.html"><img style="" src="img/btn1.png" alt="" /></a>
<a href="qianzi.html"><img style="" src="img/btn2.png" alt="" /></a>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const container = document.getElementById('container');
const loadingElement = document.getElementById('loading');
fetch('images/')
.then(response => {
if (!response.ok) {
throw new Error(`目录请求失败，状态码：${response.status}`);
}
return response.text();
})
.then(html => {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const links = doc.querySelectorAll('a[href]');
const imageFiles = Array.from(links)
.map(link => link.getAttribute('href'))
.filter(file => /\.(jpg|jpeg|png|gif|webp)$/i.test(file));
if (imageFiles.length ===
0) {
loadingElement.textContent = '未找到图片文件';
return;
}
loadingElement.style.display = 'none';
// 动态创建box，每个box一个图片
const boxWidth = 4
00;
const boxHeight = 2
00; // 估算高度，图片15
0 + padding + border + margin，实际可根据需要调整
const gapX =
0; // 列间距
const gapY = 5
0; // 行间距
const boxesPerColumn = 3;
imageFiles.forEach((file, index) => {
const box = document.createElement('div');
box.className = 'box';
// 计算列号和行号
const col = Math.floor(index / boxesPerColumn);
const row = index % boxesPerColumn;
// 设置left和top
box.style.left = `${col * (boxWidth + gapX)}px`;
box.style.top = `${row * (boxHeight + gapY)}px`;
const imageContainer = document.createElement('div');
imageContainer.className = 'image-container';
const img = document.createElement('img');
img.src =file;
imageContainer.appendChild(img);
box.appendChild(imageContainer);
container.appendChild(box);
});
// 动画逻辑
const boxes = document.getElementsByClassName('box');
function moveBox(element, delay, distance) {
setTimeout(() => {
// 开始平滑移动
element.style.transition = 'transform 3
0s linear';
element.style.transform = `translateX(-${distance}px)`;
// 2
0秒后，取消动画，瞬间回到起点
setTimeout(() => {
element.style.transition = 'none';
element.style.transform = 'translateX(
0)';
// 强制浏览器渲染，触发重绘
element.
offsetHeight; // 读取
offsetHeight强制重绘
// 重新开始动画
moveBox(element,
0, distance);
}, 2
0000);
}, delay);
}
// 给每行box设置不同的延迟，避免同
时移动
// 计算移动距离
const totalColumns = Math.ceil(imageFiles.length / boxesPerColumn);
const containerWidth = 192
0;
const totalWidth = totalColumns * (boxWidth + gapX);
const distance = containerWidth + totalWidth;
Array.from(boxes).forEach((box, idx) => {
if(idx%3==
0){
moveBox(box, 19
00, distance);//控制第一行延迟
}else if((idx+1)%3==
0){
moveBox(box, 14
00, distance);//控制第三行延迟
}else{
moveBox(box, 11
00, distance);//控制第二行延迟
}
});
})
.catch(error => {
console.error('获取图片失败:', error);
loadingElement.textContent = '加载图片失败，请确保通过本地服务器运行此页面';
});
});
</script>
</body>
</html>
这个是我的图片动效代码，我现在需要不改变代码获取图片方式的前提下，让代码的循环更加流畅丝滑
扫一扫
3356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
