网站 › 『编程语言讨论求助区』 › 分享一个自己写的前端源码（轮播图）

yuzilin 发表于 2024-3-17 12:49

分享一个自己写的前端源码（轮播图）

<style>
* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.carousel-container {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.carousel-slide img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;/* 把全部图片透明 */
    transition: opacity 0.5s ease-in-out;
}

.carousel-slide img.active {
    opacity: 1; /* 让其显示当前活动的图片，让具有active类名的第一张图片不透明度为一 */
}

.dots-container {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    justify-content: center;
}

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: #ddd;
    border-radius: 50%;
    transition: background-color 0.6s ease;
}

.dot.active {
    background-color: black;
}

/* 添加：左右按钮样式 */
.prev-btn{
          position: absolute;
          bottom: 110px;
          left: 10%;
          transform: translateX(-50%);
          display: flex;
          justify-content: space-between;
          width: 60px;
          height: 60px;
          opacity: 0.6;
          font-size:45px;
}
.next-btn{
          position: absolute;
          bottom: 110px;
          right: 8%;
          transform: translateX(-50%);
          display: flex;
          justify-content: space-between;
          width: max-content;
          width: 60px;
          height: 60px;
          opacity: 0.6;
          font-size:45px;
}
</style>
<div class="carousel-container">
<div class="carousel-slide">
    <!-- 为图片添加 active 类，初始时第一张直接设置为不透明，避免初始是空白的 -->
    <img src="./img/ChMkJ1bKwleIEcuLAAtHTojgTk8AALGmgL0Ke0AC0dm716.jpg" alt="Image 1" class="active">
    <img src="./img/ChMkJ1bKwleIeZAZAAptgm_QzxAAALGmgKi5SQACm2a020.jpg" alt="Image 2"><!-- src修改图片链接处 -->
    <img src="./img/ChMkJlbKwleIEIH6AAp6SJUdFWEAALGmgKuV3AACnpg275.jpg" alt="Image 3">
    <img src="./img/ChMkJlbKwliIALc3AA7o_JCbGH0AALGmgNpAL4ADukU965.jpg" alt="Image 4">
</div>
<div class="dots-container">
    <div class="dot active"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</div>

<div class="controls-container">
    <button class="prev-btn" ><-</button>
    <button class="next-btn" >-></button>
</div><!-- 左右按键 -->
</div>

<script>
const carouselSlide = document.querySelector('.carousel-slide');
const images = carouselSlide.querySelectorAll('img');
const dotsContainer = document.querySelectorAll('.dot');
let currentSlide = 0;//记录每次轮播的索引

function changeSlide(direction) {
    if (direction === 'next') {
      currentSlide = (currentSlide + 1) % images.length;
    } else if (direction === 'prev') {
      currentSlide = (currentSlide - 1 + images.length) % images.length;
    }//可重置let currentSlide对应的值并实现无缝功能
    // 更新图片状态，让不透明度为1的图片与当前索引保持一致
    images.forEach((img, index) => {
      img.classList.toggle('active', index === currentSlide);
    });
    // 高亮当前活动的点
    dotsContainer.forEach((dot, index) => {
      dot.classList.toggle('active', index === currentSlide);
    });
}


// 点击圆点切换图片
dotsContainer.forEach((dot, index) => {
    dot.addEventListener('click', () => {
      currentSlide = index;
      changeSlide('jump');
    });
});

// 自动轮播功能（每3.6秒自动切换到下一张）
setInterval(() => {
    changeSlide('next');
}, 3600);

// 左右按键事件监听
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');

prevBtn.addEventListener('click', () => {
    changeSlide('prev');
});

nextBtn.addEventListener('click', () => {
    changeSlide('next');
});
</script>

ldwz 发表于 2024-3-17 14:32

有演示不？这个和那种插件的啥区别？

wjh 发表于 2024-3-17 15:21

本帖最后由 wjh 于 2024-3-17 15:24 编辑

确实，不是很直观。

Tikony 发表于 2024-3-17 16:09

有效果图，会更好一些

soglog 发表于 2024-3-17 16:16

贴个图出来看看效果撒·

yyysss153 发表于 2024-3-17 16:37

感谢分享

李现在哪 发表于 2024-3-17 16:45

只有css？emmm

moruye 发表于 2024-3-17 19:25

anoming 发表于 2024-3-18 08:25

怎么不载一张页面图呢，这样看不到效果

sitefan 发表于 2024-3-18 09:35

我师父当年问过我一个问题，考虑客户鼠标放到轮播图上就不自动轮播的情况了吗？

查看完整版本: 分享一个自己写的前端源码（轮播图）