Register
> 博客>

自动轮播html代码css

新速特源码 3月19日 28 0 

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Automatic Carousel</title>
<style>
.carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.carousel-content {
  display: flex;
  transition: transform 0.5s ease;
}

.slide {
  flex: 0 0 100%; /* 设置每个幻灯片的宽度为100% */
}

/* 设置幻灯片中的图片样式 */
.slide img {
  width: 100%;
  height: auto;
}

/* 隐藏滚动条 */
html, body {
  overflow-x: hidden;
}

</style>
</head>
<body>

<div class="carousel">
  <div class="carousel-content">
    <div class="slide">
      <img src="image1.jpg" alt="Slide 1">
    </div>
    <div class="slide">
      <img src="image2.jpg" alt="Slide 2">
    </div>
    <div class="slide">
      <img src="image3.jpg" alt="Slide 3">
    </div>
  </div>
</div>

<script>
// 获取幻灯片容器和幻灯片
const carousel = document.querySelector('.carousel-content');
const slides = document.querySelectorAll('.slide');

// 设置索引和幻灯片宽度
let currentIndex = 0;
const slideWidth = slides[0].clientWidth;

// 自动播放函数
function nextSlide() {
  // 计算下一个幻灯片的索引
  currentIndex = (currentIndex + 1) % slides.length;
  // 设置幻灯片容器的transform属性以切换到下一个幻灯片
  carousel.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
}

// 每3秒自动切换到下一张幻灯片
setInterval(nextSlide, 3000);
</script>

</body>
</html>

这个示例中，幻灯片会每隔3秒自动切换到下一张。你需要把"image1.jpg", "image2.jpg", 和 "image3.jpg" 替换成你自己的图片路径。

如果你想要添加一些控制按钮来手动切换幻灯片，可以修改HTML和JavaScript部分如下：

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Automatic Carousel with Controls</title>
<style>
.carousel {
width: 100%;
overflow: hidden;
position: relative;
}
.carousel-content {
display: flex;
transition: transform 0.5s ease;
}
.slide {
flex: 0 0 100%;
}
.slide img {
width: 100%;
height: auto;
}
.controls {
position: absolute;
top: 50%;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
.control-btn {
cursor: pointer;
background-color: rgba(255, 255, 255, 0.5);
padding: 10px;
border: none;
outline: none;
transition: background-color 0.3s ease;
}
.control-btn:hover {
background-color: rgba(255, 255, 255, 0.8);
}
</style>
</head>
<body>
<div class="carousel">
<div class="carousel-content">
<div class="slide">
<img src="image1.jpg" alt="Slide 1">
</div>
<div class="slide">
<img src="image2.jpg" alt="Slide 2">
</div>
<div class="slide">
<img src="image3.jpg" alt="Slide 3">
</div>
</div>
<div class="controls">
<button class="control-btn prev-btn">&lt;</button>
<button class="control-btn next-btn">&gt;</button>
</div>
</div>
<script>
const carousel = document.querySelector('.carousel-content');
const slides = document.querySelectorAll('.slide');
let currentIndex = 0;
const slideWidth = slides[0].clientWidth;
function nextSlide() {
currentIndex = (currentIndex + 1) % slides.length;
carousel.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
}
function prevSlide() {
currentIndex = (currentIndex - 1 + slides.length) % slides.length;
carousel.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
}
document.querySelector('.next-btn').addEventListener('click', nextSlide);
document.querySelector('.prev-btn').addEventListener('click', prevSlide);
setInterval(nextSlide, 3000);
</script>
</body>
</html>

在这个例子中，我们添加了两个控制按钮，一个用于切换到下一张幻灯片，另一个用于切换到上一张幻灯片。这些按钮被放置在幻灯片容器的底部。

腾讯云最新优惠活动，点击查看

Related

热门文章

微海报