dedecms轮播图代码

DedeCMS 是一个基于 PHP 和 MySQL 的开源网站内容管理系统（CMS）。它提供了丰富的功能，包括文章管理、会员管理、模板管理等。轮播图（Carousel）是网站中常见的功能，用于展示多张图片，并且可以自动切换或通过用户交互进行切换。

基础概念

轮播图通常由一组图片组成，这些图片在一个容器中循环显示。用户可以通过点击左右箭头或自动定时器来切换图片。轮播图可以增加网站的视觉吸引力，提高用户体验。

类型

自动轮播：图片按照设定的时间间隔自动切换。
手动轮播：用户通过点击左右箭头或滑动来切换图片。
触摸轮播：支持触摸屏设备，用户可以通过滑动来切换图片。

应用场景

首页展示：在网站首页展示公司的产品、服务或活动。
产品展示：在产品页面展示多张产品图片。
新闻动态：在新闻页面展示最新的新闻图片。

示例代码

以下是一个简单的 DedeCMS 轮播图代码示例：

<div class="carousel">
    <div class="carousel-inner">
        <div class="carousel-item">
            <img src="image1.jpg" alt="Image 1">
        </div>
        <div class="carousel-item">
            <img src="image2.jpg" alt="Image 2">
        </div>
        <div class="carousel-item">
            <img src="image3.jpg" alt="Image 3">
        </div>
    </div>
    <button class="carousel-control-prev" onclick="prevSlide()">&#10094;</button>
    <button class="carousel-control-next" onclick="nextSlide()">&#10095;</button>
</div>

<script>
    let currentSlide = 0;
    const slides = document.querySelectorAll('.carousel-item');
    const totalSlides = slides.length;

    function showSlide(index) {
        slides.forEach((slide, i) => {
            slide.style.display = i === index ? 'block' : 'none';
        });
    }

    function nextSlide() {
        currentSlide = (currentSlide + 1) % totalSlides;
        showSlide(currentSlide);
    }

    function prevSlide() {
        currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
        showSlide(currentSlide);
    }

    // 自动轮播
    setInterval(nextSlide, 3000);

    // 初始化显示第一张图片
    showSlide(currentSlide);
</script>

<style>
    .carousel {
        position: relative;
        width: 100%;
        overflow: hidden;
    }
    .carousel-inner {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }
    .carousel-item {
        min-width: 100%;
        box-sizing: border-box;
    }
    .carousel-item img {
        width: 100%;
        display: block;
    }
    .carousel-control-prev, .carousel-control-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        padding: 10px;
        cursor: pointer;
    }
    .carousel-control-prev {
        left: 10px;
    }
    .carousel-control-next {
        right: 10px;
    }
</style>