dedecms内容页图片滑动

基础概念

DedeCMS（织梦内容管理系统）是一款基于PHP+MySQL的网站内容管理系统。它提供了丰富的功能，包括文章管理、图片管理、会员管理等。内容页图片滑动是指在DedeCMS的内容页中实现图片的滑动展示效果，通常用于新闻、产品展示等页面。

类型

水平滑动：图片在水平方向上滑动。
垂直滑动：图片在垂直方向上滑动。
淡入淡出：图片之间通过淡入淡出的效果进行切换。

应用场景

新闻展示：在新闻内容页中滑动展示相关的图片。
产品展示：在产品详情页中滑动展示产品的多张图片。
活动推广：在活动页面中滑动展示活动的多张宣传图片。

实现方法

在DedeCMS中实现内容页图片滑动，通常可以通过以下几种方法：

使用JavaScript库

可以使用一些JavaScript库来实现图片滑动效果，比如Swiper、Slick等。

示例代码（使用Swiper）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片滑动示例</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <style>
        .swiper-container {
            width: 100%;
            height: 300px;
        }
        .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="image1.jpg" alt="Image 1"></div>
            <div class="swiper-slide"><img src="image2.jpg" alt="Image 2"></div>
            <div class="swiper-slide"><img src="image3.jpg" alt="Image 3"></div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    </script>
</body>
</html>

参考链接：

Swiper 官网

使用CSS3动画

也可以通过CSS3的动画效果来实现图片滑动。

示例代码（使用CSS3动画）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片滑动示例</title>
    <style>
        .slider {
            width: 100%;
            overflow: hidden;
            position: relative;
        }
        .slider-container {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }
        .slider-item {
            min-width: 100%;
            box-sizing: border-box;
        }
        .slider-item img {
            width: 100%;
            height: auto;
        }
        .slider-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 10px;
            cursor: pointer;
        }
        .slider-button.prev {
            left: 10px;
        }
        .slider-button.next {
            right: 10px;
        }
    </style>
</head>
<body>
    <div class="slider">
        <div class="slider-container">
            <div class="slider-item"><img src="image1.jpg" alt="Image 1"></div>
            <div class="slider-item"><img src="image2.jpg" alt="Image 2"></div>
            <div class="slider-item"><img src="image3.jpg" alt="Image 3"></div>
        </div>
        <div class="slider-button prev">Prev</div>
        <div class="slider-button next">Next</div>
    </div>

    <script>
        const sliderContainer = document.querySelector('.slider-container');
        const sliderItems = document.querySelectorAll('.slider-item');
        let currentIndex = 0;

        function moveToNext() {
            currentIndex++;
            if (currentIndex >= sliderItems.length) {
                currentIndex = 0;
                sliderContainer.style.transition = 'none';
                sliderContainer.style.transform = `translateX(0)`;
                setTimeout(() => {
                    sliderContainer.style.transition = 'transform 0.5s ease-in-out';
                }, 50);
            }
            sliderContainer.style.transform = `translateX(-${currentIndex * 100}%)`;
        }

        function moveToPrev() {
            currentIndex--;
            if (currentIndex < 0) {
                currentIndex = sliderItems.length - 1;
                sliderContainer.style.transition = 'none';
                sliderContainer.style.transform = `translateX(-${(sliderItems.length - 1) * 100}%)`;
                setTimeout(() => {
                    sliderContainer.style.transition = 'transform 0.5s ease-in-out';
                }, 50);
            }
            sliderContainer.style.transform = `translateX(-${currentIndex * 100}%)`;
        }

        document.querySelector('.slider-button.next').addEventListener('click', moveToNext);
        document.querySelector('.slider-button.prev').addEventListener('click', moveToPrev);
    </script>
</body>
</html>