技巧教程轮播图

雾恩 · 2024/10/01

标准非常明显，同时圆点导航数量是根据添加图片的数量来决定的
演示站点每天BBS
注意：xxx.css和xxx.js要根据实际情况来调整CSS和JS的外部链接

HTML：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入 jQuery 库 -->
    <link rel="stylesheet" type="text/css" href="xxx.css">
</head>
<body>
<div class="carousel-container">
    <div class="carousel-slide">
        <!-- 添加图片 -->
        <img src="xxx.jpg">
        <img src="xxx.jpg">
        <img src="xxx.jpg">
        <img src="xxx.jpg">
    </div>

    <!-- 前后按钮 -->
    <button class="prev">&#10094;</button>
    <button class="next">&#10095;</button>

    <!-- 圆点导航 -->
    <div class="dots"></div>
</div>

<script src="xxx.js"></script>

</body>
</html>

CSS：

.carousel-container {
    position: relative;
    width: 100%;
    max-width: 1000px; /* 容器最大宽度 */
    height: 300px; /* 容器初始高度，可根据需求调整 */
    margin: auto;
    overflow: hidden;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    background-color: #000; /* 容器背景色 */
    border-radius: 20px; /* 设置圆角 */
}

.carousel-slide {
    display: flex;
    transition: transform 0.5s ease;
    width: 100%;
    position: relative;
}

.carousel-slide img {
    width: 100%; /* 保证图片宽度始终为容器宽度 */
    height: 100%; /* 保证图片高度始终为容器高度 */
    object-fit: cover; /* 使用 cover 保证图片始终填充容器 */
    object-position: center; /* 保证图片在容器中垂直和水平居中 */
}

/* 按钮默认状态隐藏在容器的左右两侧 */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* 使按钮垂直居中 */
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    cursor: pointer;
    border-radius: 50%;
    transition: transform 0.3s ease; /* 添加丝滑过渡效果 */
    z-index: 10;
}

.prev {
    left: 10px; /* 按钮初始位置固定在容器左侧 */
    transform: translateY(-50%) translateX(-100px); /* 初始时隐藏在左侧外部 */
}

.next {
    right: 10px; /* 按钮初始位置固定在容器右侧 */
    transform: translateY(-50%) translateX(100px); /* 初始时隐藏在右侧外部 */
}

/* 鼠标悬停时按钮滑入 */
.carousel-container:hover .prev {
    transform: translateY(-50%) translateX(0); /* 左侧按钮滑入 */
}

.carousel-container:hover .next {
    transform: translateY(-50%) translateX(0); /* 右侧按钮滑入 */
}

/* 圆点导航 */
.dots {
    text-align: center;
    padding: 10px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
}

.dot {
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: #fff; /* 圆点默认颜色为白色 */
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.5s ease;
}

.dot.active {
    background-color: rgb(33, 117, 243); /* 选中后的颜色为亮蓝色 */
}

JavaScript：

    $(document).ready(function() {
        var currentIndex = 0;
        var images = $('.carousel-slide img');
        var totalImages = images.length;
        var autoPlay;
        var dotsContainer = $('.dots');

        // 动态生成圆点导航
        for (var i = 0; i < totalImages; i++) {
            var dot = $('<span class="dot"></span>');
            if (i === 0) {
                dot.addClass('active');
            }
            dotsContainer.append(dot);
        }

        var dots = $('.dot');

        function showImage(index) {
            var offset = -index * 100;
            $('.carousel-slide').css('transform', 'translateX(' + offset + '%)');
            dots.removeClass('active');
            dots.eq(index).addClass('active');
        }

        function nextImage() {
            currentIndex = (currentIndex + 1) % totalImages;
            showImage(currentIndex);
        }

        function prevImage() {
            currentIndex = (currentIndex - 1 + totalImages) % totalImages;
            showImage(currentIndex);
        }

        function startAutoPlay() {
            autoPlay = setInterval(nextImage, 3000);
        }

        function stopAutoPlay() {
            clearInterval(autoPlay);
        }

        // 初始自动播放
        startAutoPlay();

        // 点击下一张
        $('.next').click(function() {
            stopAutoPlay();
            nextImage();
            startAutoPlay(); // 重启自动播放
        });

        // 点击上一张
        $('.prev').click(function() {
            stopAutoPlay();
            prevImage();
            startAutoPlay(); // 重启自动播放
        });

        // 点击圆点切换图片
        dots.click(function() {
            stopAutoPlay();
            currentIndex = $(this).index();
            showImage(currentIndex);
            startAutoPlay(); // 重启自动播放
        });
    });

雾恩 · 2024/10/01

在我的站点测试中发现
手机端显示不佳，一下为修改后的代码

JS监听手机端触摸轮播图容器

CSS：

.carousel-container {
    position: relative;
    width: 100%; /* 确保容器的宽度是100% */
    max-width: 1000px; /* 容器最大宽度 */
    height: 350px; /* 高度自动调整，避免黑边 */
    overflow: hidden; /* 避免溢出内容显示 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    background-color: #000; /* 容器背景色 */
    border-radius: 20px; /* 设置圆角 */
}

.carousel-slide {
    display: flex;
    transition: transform 0.5s ease;
    width: 100%;
    position: relative;
}

.carousel-slide img {
    padding: 0;
    margin: 0;
    border: none;
    width: 100%; /* 保证图片宽度始终为容器宽度 */
    height: 100%; /* 保证图片高度始终为容器高度 */
    object-fit: cover; /* 使用 cover 保证图片始终填充容器 */
    object-position: center; /* 保证图片在容器中垂直和水平居中 */
}

/* 按钮默认状态隐藏在容器的左右两侧 */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* 使按钮垂直居中 */
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    cursor: pointer;
    border-radius: 50%;
    transition: transform 0.3s ease; /* 添加丝滑过渡效果 */
    z-index: 10;
}

.prev {
    left: 10px; /* 按钮初始位置固定在容器左侧 */
    transform: translateY(-50%) translateX(-100px); /* 初始时隐藏在左侧外部 */
}

.next {
    right: 10px; /* 按钮初始位置固定在容器右侧 */
    transform: translateY(-50%) translateX(100px); /* 初始时隐藏在右侧外部 */
}

/* 鼠标悬停时按钮滑入 */
.carousel-container:hover .prev {
    transform: translateY(-50%) translateX(0); /* 左侧按钮滑入 */
}

.carousel-container:hover .next {
    transform: translateY(-50%) translateX(0); /* 右侧按钮滑入 */
}

/* 圆点导航 */
.dots {
    text-align: center;
    padding: 10px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
}

.dot {
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: #fff; /* 圆点默认颜色为白色 */
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.5s ease;
}

.dot.active {
    background-color: rgb(33, 117, 243); /* 选中后的颜色为亮蓝色 */
}

/* 响应式设计：屏幕宽度小于768px时的样式 */
@media (max-width: 768px) {
    .carousel-container {
        height: 190px; /* 为移动端设备设置合理的高度 */
    }
}
    
    .carousel-slide img {
        height: 100%; /* 确保图片在移动设备上填满容器 */
    }
    
    .prev, .next {
        width: 30px;
        height: 30px; /* 缩小导航按钮的大小 */
    }
    
    .dots {
        bottom: 5px; /* 调整圆点导航的位置，避免其在小屏幕上被遮挡 */
    }
    
    .dot {
        height: 10px;
        width: 10px; /* 缩小圆点的大小 */
    }

JavaScript：

    $(document).ready(function() {
        var currentIndex = 0;
        var images = $('.carousel-slide img');
        var totalImages = images.length;
        var autoPlay;
        var dotsContainer = $('.dots');

        // 动态生成圆点导航
        for (var i = 0; i < totalImages; i++) {
            var dot = $('<span class="dot"></span>');
            if (i === 0) {
                dot.addClass('active');
            }
            dotsContainer.append(dot);
        }

        var dots = $('.dot');

        function showImage(index) {
            var offset = -index * 100;
            $('.carousel-slide').css('transform', 'translateX(' + offset + '%)');
            dots.removeClass('active');
            dots.eq(index).addClass('active');
        }

        function nextImage() {
            currentIndex = (currentIndex + 1) % totalImages;
            showImage(currentIndex);
        }

        function prevImage() {
            currentIndex = (currentIndex - 1 + totalImages) % totalImages;
            showImage(currentIndex);
        }

        function startAutoPlay() {
            autoPlay = setInterval(nextImage, 3000);
        }

        function stopAutoPlay() {
            clearInterval(autoPlay);
        }

        // 初始自动播放
        startAutoPlay();

        // 点击下一张
        $('.next').click(function() {
            stopAutoPlay();
            nextImage();
            startAutoPlay(); // 重启自动播放
        });

        // 点击上一张
        $('.prev').click(function() {
            stopAutoPlay();
            prevImage();
            startAutoPlay(); // 重启自动播放
        });

        // 点击圆点切换图片
        dots.click(function() {
            stopAutoPlay();
            currentIndex = $(this).index();
            showImage(currentIndex);
            startAutoPlay(); // 重启自动播放
        });
    });
    let startX = 0;
let isSwiping = false;

// 监听触摸开始事件
document.querySelector('.carousel-container').addEventListener('touchstart', (e) => {
    startX = e.touches[0].clientX;
    isSwiping = true;
});

// 监听触摸结束事件
document.querySelector('.carousel-container').addEventListener('touchmove', (e) => {
    if (!isSwiping) return;
    const diffX = e.touches[0].clientX - startX;

    if (diffX > 50) {
        // 向右滑动，显示上一张
        showPreviousSlide();
        isSwiping = false;
    } else if (diffX < -50) {
        // 向左滑动，显示下一张
        showNextSlide();
        isSwiping = false;
    }
});

雾恩 · 2024/11/30

恶俗鸟说：
手机可以正常滑动图片电脑不动

电脑有按钮

恶俗鸟 · 2024/11/30

每天导航说：
电脑有按钮

可以加一下联系方式吗，网站私聊功能出错

雾恩 · 2024/11/30

恶俗鸟说：
可以加一下联系方式吗，网站私聊功能出错

3992375745

技巧教程轮播图

雾恩

雾恩

雾恩

恶俗鸟

雾恩

相似主题

我们非常重视您的隐私

技巧教程 轮播图

雾恩

雾恩

雾恩

恶俗鸟

雾恩

相似主题

我们非常重视您的隐私

技巧教程轮播图