搜索
DEDE建站

dede css 5幻灯片如何设置与调用？

99ANYc3cd6
99ANYc3cd6 / / 0 评论 / 1 阅读
作者有点忙，还没来得及写简介......
预计阅读时长 38 分钟
位置： 首页 › DEDE建站 › 正文

核心原理

这种幻灯片的实现原理主要依赖于 CSS 的 target 伪类 和 Radio 单选按钮的隐藏与关联。

dede css 5 幻灯片
（图片来源网络，侵删）

  1. 结构：

    • 一个包含所有幻灯片图片的容器。
    • 每个图片包裹在一个 <label> 标签中。
    • 一组隐藏的 <input type="radio"> 单选按钮，每个按钮对应一张图片。
    • 一个用于切换幻灯片的“上一张/下一张”导航按钮区域。

  2. 交互逻辑：

    • 默认状态下,所有 <input> 都没有被选中，所有 <label> 都通过 CSS opacity: 0; 或 display: none; 隐藏。
    • 当你点击某个“下一张”或“上一张”的导航按钮时，它会通过 for 属性关联到下一个或上一个 <input> 并触发它的 target 状态。
    • 当某个 <input> 被触发（成为 target）时，它对应的那个 <label> 就会通过 CSS 选择器（input#slide1:target + label）被显示出来。

第一步：准备数据（调用文章）

我们需要使用 {dede:arclist} 标签来获取我们想要展示在幻灯片中的文章，通常我们会选择带有“推荐”或“头条”属性的文章。

{dede:arclist flag='c' typeid='栏目ID' row='5'}
    <a href="[field:arcurl/]">
        <img src="[field:litpic/]" alt="[field:title function='html2text(@me)'/]">
    </a>
{/dede:arclist}
  • flag='c': 调用推荐的文章，你也可以用 flag='h' 调用头条，或者 flag='ch' 调用头条推荐。
  • typeid='栏目ID': 指定从哪个栏目调用文章，如果留空，则从全站调用。
  • row='5': 只调用5篇文章，正好用于5张幻灯片。
  • [field:litpic/]: 文章的缩略图。
  • [field:arcurl/]: 文章的链接。
  • [field:title function='html2text(@me)'/]: 文章标题，并过滤掉HTML标签，作为 img 的 alt 属性，有利于SEO。

第二步：完整的 HTML 结构

将上面的数据套入我们之前提到的结构中,这里以5张幻灯片为例。

dede css 5 幻灯片
（图片来源网络，侵删）
<div class="slideshow-container">
    <!-- 隐藏的 Radio 按钮组，用于控制幻灯片切换 -->
    <input type="radio" name="slides" id="slide1" checked>
    <input type="radio" name="slides" id="slide2">
    <input type="radio" name="slides" id="slide3">
    <input type="radio" name="slides" id="slide4">
    <input type="radio" name="slides" id="slide5">
    <!-- 幻灯片图片区域 -->
    <div class="slides">
        <!-- 第一张幻灯片 -->
        <label for="slide1" class="slide">
            <a href="[field:global name='autoindex' runphp='yes']@me=@me+1;[/field:global]">
                <img src="[field:litpic/]" alt="[field:title function='html2text(@me)'/]">
            </a>
        </label>
        <!-- 第二张幻灯片 -->
        <label for="slide2" class="slide">
            <a href="[field:global name='autoindex' runphp='yes']@me=@me+1;[/field:autoindex]">
                <img src="[field:litpic/]" alt="[field:title function='html2text(@me)'/]">
            </a>
        </label>
        <!-- ... 第三、四、五张幻灯片，同理 ... -->
        <!-- 为了简洁，这里用 {dede:arclist} 循环来写 -->
    </div>
    <!-- 导航按钮 -->
    <div class="navigation-dots">
        <label for="slide1"></label>
        <label for="slide2"></label>
        <label for="slide3"></label>
        <label for="slide4"></label>
        <label for="slide5"></label>
    </div>
</div>

注意：

  • id="slide1" 到 id="slide5" 必须是唯一的。
  • 每个 <label for="slideX"> 的 for 属性值必须与对应 <input id="slideX"> 的 id 值完全一致，这样才能建立关联。
  • [field:global name='autoindex' runphp='yes']@me=@me+1;[/field:global] 是一个巧妙的方法，可以在 {dede:arclist} 循环中生成递增的数字 (1, 2, 3...)，用来动态设置 id 和 for 属性。

第三步：编写 CSS 样式

这是幻灯片效果的核心,CSS 将控制显示、隐藏和切换逻辑。

/* 幻灯片容器 */
.slideshow-container {
    position: relative;
    max-width: 1000px; /* 根据你的设计调整 */
    height: 400px;     /* 根据你的设计调整 */
    margin: 0 auto;
    overflow: hidden; /* 隐藏超出容器大小的图片 */
}
/* 所有幻灯片图片的默认状态 */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* 默认完全透明 */
    transition: opacity 1s ease-in-out; /* 添加淡入淡出效果 */
}
/* 默认选中的第一张幻灯片 */
#slide1:checked ~ .slides .slide:nth-of-type(1),
#slide2:checked ~ .slides .slide:nth-of-type(2),
#slide3:checked ~ .slides .slide:nth-of-type(3),
#slide4:checked ~ .slides .slide:nth-of-type(4),
#slide5:checked ~ .slides .slide:nth-of-type(5) {
    opacity: 1; /* 当对应的radio被选中时，显示对应的图片 */
}
/* 图片样式 */
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证图片填满容器且不变形 */
}
/* 隐藏所有radio按钮 */
input[type="radio"] {
    display: none;
}
/* 底部导航点 */
.navigation-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}
.navigation-dots label {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.3s ease;
}
/* 当鼠标悬停在导航点上时 */
.navigation-dots label:hover {
    background-color: rgba(255, 255, 255, 0.8);
}
/* 当对应的radio被选中时，其对应的导航点高亮 */
#slide1:checked ~ .navigation-dots label:nth-of-type(1),
#slide2:checked ~ .navigation-dots label:nth-of-type(2),
#slide3:checked ~ .navigation-dots label:nth-of-type(3),
#slide4:checked ~ .navigation-dots label:nth-of-type(4),
#slide5:checked ~ .navigation-dots label:nth-of-type(5) {
    background-color: white;
}

CSS 选择器解析：

  • #slide1:checked ~ .slides .slide:nth-of-type(1)：这是一个关键的选择器，它的意思是：“当 id 为 slide1 的 input 被选中时 (checked)，选择它之后 () 所有 .slides 容器中的第一个 (.nth-of-type(1)) .slide 元素”。
  • 是兄弟选择器，它选择指定元素之后的所有兄弟元素。
  • opacity: 0 和 opacity: 1 的切换，配合 transition，就实现了平滑的淡入淡出效果。

第四步：整合到 DedeCMS 模板

我们将所有部分组合起来,放入你的 DedeCMS 模板文件中（通常是 index.htm 或其他自定义首页模板）。

dede css 5 幻灯片
（图片来源网络，侵删）

完整模板代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">我的DedeCMS站点</title>
    <style>
        /* --- 将上面第三步的 CSS 代码粘贴到这里 --- */
        .slideshow-container {
            position: relative;
            max-width: 1000px;
            height: 400px;
            margin: 20px auto;
            overflow: hidden;
        }
        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }
        #slide1:checked ~ .slides .slide:nth-of-type(1),
        #slide2:checked ~ .slides .slide:nth-of-type(2),
        #slide3:checked ~ .slides .slide:nth-of-type(3),
        #slide4:checked ~ .slides .slide:nth-of-type(4),
        #slide5:checked ~ .slides .slide:nth-of-type(5) {
            opacity: 1;
        }
        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        input[type="radio"] {
            display: none;
        }
        .navigation-dots {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
        }
        .navigation-dots label {
            display: block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .navigation-dots label:hover {
            background-color: rgba(255, 255, 255, 0.8);
        }
        #slide1:checked ~ .navigation-dots label:nth-of-type(1),
        #slide2:checked ~ .navigation-dots label:nth-of-type(2),
        #slide3:checked ~ .navigation-dots label:nth-of-type(3),
        #slide4:checked ~ .navigation-dots label:nth-of-type(4),
        #slide5:checked ~ .navigation-dots label:nth-of-type(5) {
            background-color: white;
        }
    </style>
</head>
<body>
    <!-- ... 你的网站其他部分 ... -->
    <!-- 幻灯片部分开始 -->
    <div class="slideshow-container">
        <!-- 隐藏的 Radio 按钮组 -->
        <input type="radio" name="slides" id="slide1" checked>
        <input type="radio" name="slides" id="slide2">
        <input type="radio" name="slides" id="slide3">
        <input type="radio" name="slides" id="slide4">
        <input type="radio" name="slides" id="slide5">
        <!-- 幻灯片图片区域 -->
        <div class="slides">
            {dede:arclist flag='c' typeid='1' row='5'}
            <label for="slide[field:global.autoindex/]" class="slide">
                <a href="[field:arcurl/]">
                    <img src="[field:litpic/]" alt="[field:title function='html2text(@me)'/]">
                </a>
            </label>
            {/dede:arclist}
        </div>
        <!-- 底部导航点 -->
        <div class="navigation-dots">
            {dede:arclist flag='c' typeid='1' row='5'}
            <label for="slide[field:global.autoindex/]"></label>
            {/dede:arclist}
        </div>
    </div>
    <!-- 幻灯片部分结束 -->
    <!-- ... 你的网站其他部分 ... -->
</body>
</html>

注意：在 {dede:arclist} 中，[field:global.autoindex/] 会直接输出循环的序号 (1, 2, 3...)，所以可以直接用在 for 属性里，比 runphp 更简洁。

常见问题与优化

  1. 问题：为什么我的幻灯片不显示？

    • 检查CSS：确保 .slideshow-container、.slide 等选择器正确，并且没有其他CSS规则覆盖了它们的样式（特别是 opacity 和 position）。
    • 检查HTML结构：确保 <label for="..."> 和 <input id="..."> 的 for 和 id 属性值完全匹配。
    • 检查数据：确保 [field:litpic/] 调用到的缩略图路径是正确的，图片可以正常访问。

  2. 如何添加“上一张/下一张”按钮？ 你可以添加两个新的 <label>，并利用 nth-of-type() 选择器计算出前一张和后一张的 id。

    <!-- 在 .slideshow-container 内部，input 后面添加 -->
<label for="slide5" class="nav-btn prev-btn">❮</label>
<label for="slide2" class="nav-btn next-btn">❯</label>

    然后为它们添加CSS样式,并调整选择器逻辑，这会使CSS变得复杂一些，对于新手来说，使用底部的导航点通常更简单。

  3. 如何实现自动播放？ 纯CSS无法实现真正的“自动播放”，它需要用户交互（点击）来触发，如果需要自动播放，你需要引入 JavaScript 来定时模拟点击 input 按钮，这超出了纯CSS的范围，但可以通过 jQuery 或原生 JS 轻松实现。

  4. SEO 优势 这种方法比使用 object 嵌入 Flash 或使用大量 JavaScript 的幻灯片要好得多，因为图片和链接是标准的 HTML 标签，搜索引擎可以轻松抓取和索引，有利于网站的 SEO。

这个基于 {dede:arclist} 和 CSS 的幻灯片方案是 DedeCMS 生态中一个非常经典和实用的技巧，希望这个详细的教程能帮助你成功实现它！

-- 展开阅读全文 --
头像
C语言semaphore详解，信号量如何实现进程同步？
« 上一篇 昨天
织梦网站图片不显示，问题出在哪？
下一篇 » 昨天

相关文章

取消
微信二维码
支付宝二维码

目录[+]