帮我写一段代码,内容是设计一个可以滑动的图片的前段广告页面
时间: 2023-05-20 08:01:42 浏览: 70
好的,以下是一段简单的 HTML、CSS 和 JavaScript 代码,可以实现一个可以滑动的图片的前段广告页面:
HTML 代码:
```
<div class="slider">
<div class="slides">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
</div>
```
CSS 代码:
```
.slider {
width: 100%;
overflow: hidden;
}
.slides {
display: flex;
width: 300%;
}
.slides img {
width: 33.333%;
height: auto;
}
```
JavaScript 代码:
```
const slider = document.querySelector(".slider");
const slides = document.querySelector(".slides");
const images = document.querySelectorAll(".slides img");
let counter = 1;
const size = images[0].clientWidth;
slides.style.transform = `translateX(${-size * counter}px)`;
setInterval(() => {
slides.style.transition = "transform 0.8s ease-in-out";
counter++;
slides.style.transform = `translateX(${-size * counter}px)`;
}, 3000);
slides.addEventListener("transitionend", () => {
if (images[counter].id === "lastClone") {
slides.style.transition = "none";
counter = images.length - 2;
slides.style.transform = `translateX(${-size * counter}px)`;
}
if (images[counter].id === "firstClone") {
slides.style.transition = "none";
counter = images.length - counter;
slides.style.transform = `translateX(${-size * counter}px)`;
}
});
```
这段代码使用了 flexbox 布局和 JavaScript 来实现图片的滑动效果。具体来说,我们使用了一个包含所有图片的 div 元素,然后使用 flexbox 布局将这些图片排成一行。然后,我们使用 JavaScript 来控制这个 div 元素的 transform 属性,从而实现图片的滑动效果。我们还添加了一些额外的代码,以确保滑动效果可以循环播放。