爱分享的酷小呵|发布页：kuhehe.vip

酷小呵资源站

酷小呵笔记

实用网址导航列表

隐藏资源🥰

友情链接

呱呱呱呱

这里是酷小呵笔记（kuhehe.top），收集分享考试备考资料与办公实用教程，所有内容均可免费保存，希望对你有用～😘

点击前面首页的【酷小呵笔记】可查看如何获取密码！或者：https://pan.quark.cn/s/d5f6c33fa91e

软件推荐

酷小呵资源库

SubMenu是子菜单，挂在上一个Menu中

发布页

这是一个外部链接，由slug决定跳转的网址

菜单slug留空或填#即可，用于下面的子菜单

往期

归档

分类

友链

关于

健康

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>顺滑触屏滑动轮播图</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 外层容器 */
        .carousel-outer { max-width: 1100px; margin: 0 auto 10px; padding: 0 10px; }
        .carousel-container {
            position: relative; width: 100%; height: 280px; border-radius: 12px; overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15); background: #1a1a2e;
            user-select: none; -webkit-user-drag: none; touch-action: pan-y;
        }
        .carousel-wrapper {
            display: flex; height: 100%;
            transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            will-change: transform;
        }
        .carousel-slide { flex: 0 0 100%; position: relative; height: 100%; overflow: hidden; cursor: pointer; }
        .carousel-slide img {
            width: 100%; height: 100%; object-fit: cover; display: block;
            pointer-events: none; -webkit-user-drag: none;
            filter: brightness(0.95) contrast(1.02);
        }
        /* 文字容器，无任何背景遮罩 */
        .carousel-slide .slide-caption {
            position: absolute; bottom: 36px; left: 28px; right: 28px; z-index: 3; pointer-events: none;
        }
        /* 标题：纯白文字，柔和渐变黑色阴影，无硬描边 */
        .carousel-slide .slide-caption h2 {
            font-size: 22px; font-weight: 700;
            letter-spacing: 0.5px;
            color: #ffffff;
            margin-bottom: 6px;
            text-shadow:
                0 1px 3px rgba(0,0,0,0.9),
                0 3px 6px rgba(0,0,0,0.75),
                0 6px 12px rgba(0,0,0,0.4);
        }
        /* 描述文字：纯白，浅渐变黑阴影 */
        .carousel-slide .slide-caption p {
            font-size: 14px; color: #ffffff;
            line-height: 1.5;
            opacity: 0.95;
            text-shadow:
                0 1px 2px rgba(0,0,0,0.9),
                0 2px 5px rgba(0,0,0,0.7);
        }
        /* 左右箭头 */
        .carousel-arrow {
            position: absolute; top: 50%; transform: translateY(-50%);
            width: 40px; height: 40px; border-radius: 50%;
            background: rgba(255,255,255,0.25); backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.35); color: #fff; font-size: 18px;
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            z-index: 10; transition: all 0.3s ease; outline: none; -webkit-tap-highlight-color: transparent;
        }
        .carousel-arrow:hover {
            background: rgba(255,255,255,0.45); transform: translateY(-50%) scale(1.08);
            box-shadow: 0 4px 15px rgba(0,0,0,0.25);
        }
        .carousel-arrow:active { transform: translateY(-50%) scale(0.94); }
        .carousel-arrow-left { left: 14px; }
        .carousel-arrow-right { right: 14px; }
        /* 底部圆点 */
        .carousel-dots {
            position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
            display: flex; gap: 8px; z-index: 10;
        }
        .carousel-dot {
            width: 10px; height: 10px; border-radius: 50%;
            background: rgba(255,255,255,0.5); border: none; cursor: pointer;
            transition: all 0.35s ease; outline: none; -webkit-tap-highlight-color: transparent; padding: 0;
        }
        .carousel-dot:hover { background: rgba(255,255,255,0.8); transform: scale(1.2); }
        .carousel-dot.active {
            background: #ffffff; width: 28px; border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }
        /* 平板适配 */
        @media (max-width: 768px) {
            .carousel-container { height: 220px; border-radius: 10px; }
            .carousel-slide .slide-caption { bottom: 26px; left: 18px; right: 18px; }
            .carousel-slide .slide-caption h2 { font-size: 18px; }
            .carousel-slide .slide-caption p { font-size: 12px; }
            .carousel-arrow { width: 34px; height: 34px; font-size: 15px; }
            .carousel-arrow-left { left: 8px; } .carousel-arrow-right { right: 8px; }
            .carousel-dot { width: 8px; height: 8px; }
            .carousel-dot.active { width: 22px; }
        }
        /* 手机适配 */
        @media (max-width: 480px) {
            .carousel-outer { padding: 0 5px; }
            .carousel-container { height: 180px; border-radius: 8px; }
            .carousel-slide .slide-caption { bottom: 22px; left: 12px; right: 12px; }
            .carousel-slide .slide-caption h2 { font-size: 16px; margin-bottom: 3px; }
            .carousel-slide .slide-caption p { font-size: 11px; }
            .carousel-arrow { width: 28px; height: 28px; font-size: 13px; }
            .carousel-arrow-left { left: 5px; } .carousel-arrow-right { right: 5px; }
            .carousel-dots { bottom: 10px; gap: 6px; }
            .carousel-dot { width: 7px; height: 7px; }
            .carousel-dot.active { width: 18px; }
        }
    </style>

</head>
<body>
    <div class="carousel-outer">
        <div class="carousel-container" id="carouselContainer">
            <div class="carousel-wrapper" id="carouselWrapper"></div>
            <button class="carousel-arrow carousel-arrow-left" id="carouselPrev" aria-label="上一张">
                <i class="fas fa-chevron-left"></i>
            </button>
            <button class="carousel-arrow carousel-arrow-right" id="carouselNext" aria-label="下一张">
                <i class="fas fa-chevron-right"></i>
            </button>
            <div class="carousel-dots" id="carouselDots"></div>
        </div>
    </div>


<script src="https://jianhancloud.cn/kuhehe/lunbotu.js"></script>


<script>
(function() {
    // 直接读取外部文件定义好的 carouselData
    const wrapper = document.getElementById('carouselWrapper');
    const dotsContainer = document.getElementById('carouselDots');
    const prevBtn = document.getElementById('carouselPrev');
    const nextBtn = document.getElementById('carouselNext');
    const container = document.getElementById('carouselContainer');
    const originalCount = carouselData.length;
    let currentIndex = 1;
    let isTransitioning = false;
    let autoPlayTimer = null;
    let touchStartX = 0;
    let touchEndX = 0;
    let touchDiff = 0;
    function buildSlides() {
        const allSlides = [
            { ...carouselData[originalCount-1], isClone: true, cloneOf: originalCount-1 },
            ...carouselData.map((item, i) => ({ ...item, isClone: false, cloneOf: i })),
            { ...carouselData[0], isClone: true, cloneOf: 0 }
        ];
        wrapper.innerHTML = allSlides.map((slide) => `
            <div class="carousel-slide" data-link="${slide.link || ''}" data-target="${slide.target || '_self'}">
                <img src="${slide.img}" alt="轮播图" draggable="false">
                <div class="slide-caption">
                    <h2>${slide.title}</h2>
                    <p>${slide.desc}</p>
                </div>
            </div>
        `).join('');
        dotsContainer.innerHTML = carouselData.map((_, i) => `
            <button class="carousel-dot${i === 0 ? ' active' : ''}" data-dot="${i}" aria-label="切换到第${i+1}张"></button>
        `).join('');
    }
    function updateCarousel(animate = true) {
        wrapper.style.transition = animate ? 'transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)' : 'none';
        wrapper.style.transform = `translateX(-${currentIndex * 100}%)`;
        const realIndex = (currentIndex - 1 + originalCount) % originalCount;
        dotsContainer.querySelectorAll('.carousel-dot').forEach((dot, i) => {
            dot.classList.toggle('active', i === realIndex);
        });
    }
    function goToSlide(index, animate = true) {
        if (isTransitioning && animate) return;
        isTransitioning = true;
        currentIndex = index;
        updateCarousel(animate);
        if (animate) {
            setTimeout(() => {
                isTransitioning = false;
                handleClonePosition();
            }, 520);
        } else {
            isTransitioning = false;
            handleClonePosition();
        }
    }
    function handleClonePosition() {
        if (currentIndex === 0) {
            currentIndex = originalCount;
            updateCarousel(false);
        } else if (currentIndex === originalCount + 1) {
            currentIndex = 1;
            updateCarousel(false);
        }
    }
    function goNext() { goToSlide(currentIndex + 1, true); }
    function goPrev() { goToSlide(currentIndex - 1, true); }
    function startAutoPlay() {
        stopAutoPlay();
        autoPlayTimer = setInterval(goNext, 5000);
    }
    function stopAutoPlay() {
        if (autoPlayTimer) clearInterval(autoPlayTimer);
    }
    dotsContainer.addEventListener('click', (e) => {
        const dot = e.target.closest('.carousel-dot');
        if (!dot) return;
        const targetRealIndex = parseInt(dot.dataset.dot);
        goToSlide(targetRealIndex + 1, true);
        startAutoPlay();
    });
    prevBtn.addEventListener('click', (e) => {
        e.preventDefault();
        goPrev();
        startAutoPlay();
    });
    nextBtn.addEventListener('click', (e) => {
        e.preventDefault();
        goNext();
        startAutoPlay();
    });
    container.addEventListener('mouseenter', stopAutoPlay);
    container.addEventListener('mouseleave', startAutoPlay);
    function handleSlideClick(target) {
        const slide = target.closest('.carousel-slide');
        if (!slide) return;
        const link = slide.dataset.link;
        if (!link || link.trim() === '') return;
        const targetWindow = slide.dataset.target || '_self';
        targetWindow === '_blank' ? window.open(link) : location.href = link;
    }
    container.addEventListener('click', (e) => {
        if (e.target.closest('.carousel-arrow') || e.target.closest('.carousel-dots')) return;
        handleSlideClick(e.target);
    });
    container.addEventListener('touchstart', (e) => {
        touchStartX = e.touches[0].clientX;
        stopAutoPlay();
    }, { passive: true });
    container.addEventListener('touchmove', (e) => {
        touchEndX = e.touches[0].clientX;
        touchDiff = touchEndX - touchStartX;
        wrapper.style.transition = 'none';
        wrapper.style.transform = `translateX(calc(-${currentIndex * 100}% + ${touchDiff}px))`;
    }, { passive: true });
    container.addEventListener('touchend', () => {
        const moveThreshold = 60;
        if (touchDiff > moveThreshold) {
            goPrev();
        } else if (touchDiff < -moveThreshold) {
            goNext();
        } else {
            updateCarousel(true);
        }
        touchDiff = 0;
        startAutoPlay();
    }, { passive: true });
    buildSlides();
    updateCarousel(false);
    startAutoPlay();
})();
</script>


</body>
</html>

访问次数：<img src="https://w.saobby.com/w/pkyctqbv" style="vertical-align: middle;">

实用网址导航列表

实用导航 🧭

摸鱼🐟

生活小技巧🥩

Recent Logs