微言心语

<div class="slider-container">
            <ul class="rslides" id="slider">
                <li class="active">
                    <div class="image-item">
                        <img src="http://localhost/wordpress/wp-content/uploads/2026/03/179682.jpg" alt="图文列表">
                    </div>
                    <p class="slider-caption">图文列表</p>
                </li>
                <li>
                    <div class="image-item">
                        <img src="http://localhost/wordpress/wp-content/uploads/2026/03/179682.jpg" alt="文章类型测试">
                    </div>
                    <p class="slider-caption">文章类型测试</p>
                </li>
            </ul>
            <button class="slider-btn prev-btn"><</button>
            <button class="slider-btn next-btn">></button>
            <div class="slider-indicators"></div>
        </div>

<script>
    const slider = document.getElementById('slider');
    const slides = slider.querySelectorAll('li');
    const prevBtn = document.querySelector('.prev-btn');
    const nextBtn = document.querySelector('.next-btn');
    const indicatorsContainer = document.querySelector('.slider-indicators');
    let currentIndex = 0;
    let autoplayTimer;

    function createIndicators() {
        slides.forEach((_, index) => {
            const indicator = document.createElement('div');
            indicator.className = `indicator ${index === 0 ? 'active' : ''}`;
            indicator.addEventListener('click', () => goToSlide(index));
            indicatorsContainer.appendChild(indicator);
        });
    }

    function goToSlide(index) {
        slides.forEach(slide => slide.classList.remove('active'));
        document.querySelectorAll('.indicator').forEach(ind => ind.classList.remove('active'));
        
        currentIndex = index < 0 ? slides.length - 1 : index >= slides.length ? 0 : index;
        
        slides[currentIndex].classList.add('active');
        document.querySelectorAll('.indicator')[currentIndex].classList.add('active');
        
        resetAutoplay();
    }

    function prevSlide() { goToSlide(currentIndex - 1); }
    function nextSlide() { goToSlide(currentIndex + 1); }

    function startAutoplay() {
        autoplayTimer = setInterval(nextSlide, 3000);
    }

    function resetAutoplay() {
        clearInterval(autoplayTimer);
        startAutoplay();
    }

    function initSlider() {
        createIndicators();
        startAutoplay();
        
        prevBtn.addEventListener('click', prevSlide);
        nextBtn.addEventListener('click', nextSlide);
        
        slider.addEventListener('mouseenter', () => clearInterval(autoplayTimer));
        slider.addEventListener('mouseleave', startAutoplay);
    }

    window.addEventListener('DOMContentLoaded', initSlider);
</script>

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .site-slide {
            width: 1200px;
            height: 320px;
            margin: 30px auto;
            display: flex;
            gap: 20px;
            border: 1px solid #ccc;
        }

        .slideleft {
            flex: 7;
            height: 100%;
            display: flex;
            gap: 15px;
            border: 1px solid #ccc;
        }

        .slider-container {
            flex: 1;
            height: 100%;
            position: relative;
            overflow: hidden;
            border-radius: 4px;
        }

        .rslides {
            position: relative;
            list-style: none;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .rslides li {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.8s ease;
            z-index: 0;
        }

        .rslides li.active {
            opacity: 1;
            z-index: 1;
        }

        .image-item {
            width: 100%;
            height: 100%;
        }

        .image-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* 本次修改：将文字对齐方式改为左对齐，并添加左侧内边距增强视觉效果 */
        .slider-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 8px 15px; /* 增加左侧内边距，避免文字贴边 */
            margin: 0;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            font-size: 14px;
            text-align: left; /* 核心修改：左对齐 */
        }

        .slider-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 36px;
            height: 36px;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            border-radius: 50%;
            font-size: 18px;
            cursor: pointer;
            z-index: 2;
            opacity: 0;
            visibility: hidden;
            transition: all 0.4s ease;
        }

        .slider-container:hover .slider-btn {
            opacity: 1;
            visibility: visible;
        }

        .slider-btn:hover {
            background: rgba(0, 0, 0, 0.8);
        }

        .prev-btn {
            left: 10px;
            transform: translateY(-50%) translateX(-10px);
        }

        .slider-container:hover .prev-btn {
            transform: translateY(-50%) translateX(0);
        }

        .next-btn {
            right: 10px;
            transform: translateY(-50%) translateX(10px);
        }

        .slider-container:hover .next-btn {
            transform: translateY(-50%) translateX(0);
        }

        .slider-indicators {
            position: absolute;
            bottom: 10px;
            right: 10px;
            transform: translateX(10px);
            display: flex;
            gap: 6px;
            z-index: 2;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .slider-container:hover .slider-indicators {
            opacity: 1;
            visibility: visible;
            transform: translateX(0);
        }

        .indicator {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .indicator.active {
            background: white;
        }

        #slide-right {
            width: 160px;
            height: 100%;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .item-sr {
            width: 160px;
            height: 150px;
            overflow: hidden;
            position: relative;
            border-radius: 4px;
            background: #000;
        }

        .item-sr img {
            width: 160px;
            height: 150px;
            object-fit: cover;
            transition: all 0.3s ease;
        }

        .item-sr:hover img {
            transform: scale(1.05);
            filter: brightness(1.1);
        }

        .item-sr a {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            text-decoration: none;
            color: #fff;
        }

        /* 小图文字定位：浮在图片下方 */
        .item-sr-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 8px 0;
            font-size: 14px;
            text-align: center;
            background: rgba(0, 0, 0, 0.6);
            transition: background 0.3s ease;
        }

        .item-sr:hover .item-sr-caption {
            background: rgba(0, 0, 0, 0.8);
        }

        .slideright {
            flex: 3;
            height: 100%;
            background-color: aqua;
            border: 1px solid #ccc;
            font-size: 14px;
            line-height: 1.6;
            overflow: hidden;
        }

        @media (max-width: 1200px) {
            .site-slide {
                width: 100%;
                padding: 0 10px;
                height: auto;
                flex-direction: column;
                gap: 15px;
            }
            .slideleft {
                flex: none;
                height: 320px;
            }
            .slideright {
                flex: none;
                height: auto;
                padding: 15px;
            }
        }

        @media (max-width: 768px) {
            .slideleft {
                flex-direction: column;
                height: auto;
            }
            #slide-right {
                width: 100%;
                flex-direction: row;
                justify-content: center;
                margin-top: 10px;
            }
            .item-sr {
                width: 140px;
                height: 130px;
            }
        }