HTML:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/index.js" defer></script>
</head>
<body>
<div id="container"><ul></ul></div>
</body>
</html>
CSS:
@charset "utf-8";
body {
margin: 0;
}
#container {
width: 1200px;
margin: 200px auto;
overflow: hidden;
}
#container>ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
#container>ul>li {
padding: 10px;
flex-shrink: 0;
}
#container>ul>li>img {
width: 280px;
}
JavaScript:
const imgs = ['wallhaven-0w3pdr', 'wallhaven-0w692q', 'wallhaven-13yo7w', 'wallhaven-283l3x', 'wallhaven-2e8ljx'];
const path = '../imgs';
let cte = document.getElementById('container').querySelector('ul');
const init = () => {
let frame = document.createDocumentFragment();
for (let i = 0; i < imgs.length; i++) {
let img = document.createElement('img');
img.src = `${path}/${imgs[i]}.jpg`;
let li = document.createElement('li');
li.appendChild(img);
frame.appendChild(li);
}
cte.appendChild(frame);
};
init();
let x = 0;
const move = () => {
let li = cte.firstElementChild;
if (x <= -li.offsetWidth) {
x = 0;
cte.style.transition = 'none';
cte.appendChild(li);
setTimeout(()=>{
cte.style.transition = 'transform 0.02s linear';
}, 20);
}
cte.style.transform = `translateX(${x -= 2}px)`;
};
setInterval(move, 20);
扫一扫
211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
