dede手机幻灯片代码如何适配移动端?

99ANYc3cd6
预计阅读时长 29 分钟
位置: 首页 DEDE建站 正文

使用DedeCMS自带的【焦点图】模块(最推荐,最简单)

这是最官方、最稳定的方法,适合大多数新手,它利用DedeCMS内置的{dede:arclist}标签和CSS/JS来实现。

dede手机幻灯片代码
(图片来源网络,侵删)

第1步:准备图片和数据

  1. 上传图片:将你想要展示的幻灯片图片上传到网站服务器的指定目录,/images/slide/
  2. 创建栏目:在后台创建一个专门用于存放幻灯片内容的“栏目”,这个栏目不需要生成静态页,也不需要在前台显示。
    • 进入“核心” -> “栏目管理” -> “添加栏目”。
    • 栏目名称:首页幻灯片”。
    • 上级目录:选择“主站”。
    • 关键:在“栏目列表选项”中,不要勾选“生成栏目HTML”
    • 在“栏目内容”中,不要勾选“栏目主页”
    • 设置好其他选项后,点击“确定”。
  3. 发布文章:进入你刚创建的“首页幻灯片”栏目,发布文章。
    • 每一篇文章对应一张幻灯片图片。
    • 在文章编辑器中,只需要上传图片,不需要填写任何文字内容
    • 会作为图片的alt属性,建议填写图片的关键词。
    • 发布完成后,记录下这个栏目的 ID(ID是 5)。

第2步:获取幻灯片代码模板

DedeCMS系统自带了几个焦点图的JS模板,你可以直接复制使用,也可以在此基础上修改。

  1. 登录DedeCMS后台。
  2. 进入“模板” -> “默认模板管理”。
  3. 在左侧列表中找到并打开 default 目录下的 index_body.htm 文件(这是首页模板)。
  4. 在文件中找到类似 <!-- /幻灯片 --> 的注释块,里面通常有预置的代码,如果没有,或者你想用新的,可以复制下面这个常用模板。

常用幻灯片代码模板:

<!-- 幻灯片开始 -->
<div class="focusBox">
    <div class="bd">
        <ul>
            {dede:arclist typeid='5' row='5' titlelen='20'}
            <li>
                <!-- 
                 [field:picname/] 是文章中的图片地址。
                 如果图片是手动上传到文章编辑器里的,它会自动获取第一张图。
                 如果你想用固定的图,可以手动写死路径,如 <img src="/images/slide/1.jpg" />
                 [field:title/] 是文章标题,作为图片alt属性
                -->
                <a href="[field:arcurl/]" title="[field:title/]">
                    <img src="[field:picname/]" alt="[field:title/]"/>
                </a>
            </li>
            {/dede:arclist}
        </ul>
    </div>
    <div class="hd">
        <ul></ul>
    </div>
    <!-- 如果需要左右箭头,可以取消下面注释 -->
    <!-- <a class="prev" href="javascript:void(0)"></a>
    <a class="next" href="javascript:void(0)"></a> -->
</div>
<!-- 引入jQuery库 (如果你的模板还没有引入) -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 引入幻灯片插件JS (这里以成熟的Superslide为例) -->
<script type="text/javascript" src="/static/js/jquery.SuperSlide.js"></script>
<!-- 初始化幻灯片 -->
<script type="text/javascript">
    jQuery(".focusBox").slide({ 
        titCell:".hd ul", //开启自动播放
        mainCell:".bd ul", 
        effect:"fold", //效果:fade(渐显), fold(折叠), top(滚动), left(左滚动), slide(滑动)
        autoPlay:true, //自动播放
        autoPage:true, //自动分页
        trigger:"click" //切换方式:click(点击), mouseover(鼠标移过)
    });
</script>

第3步:修改并使用代码

  1. 修改 typeid:将代码中的 typeid='5' 修改为你刚才创建的“首页幻灯片”栏目的ID。
  2. 修改JS路径:确保 /static/js/jquery.SuperSlide.js 这个路径是正确的,你可以从网上下载 jquery.SuperSlide.js 文件,并上传到你网站的 /static/js/ 目录下,如果你不想用这个插件,也可以用其他轮播图插件,只需修改相应的JS和CSS即可。
  3. 放入首页模板:将修改好的代码块,粘贴到你首页模板(index.htm)的合适位置,比如网站头部的下方。
  4. CSS样式:上面的代码需要一些CSS来控制样式,在你的CSS文件(通常是 /style/base.css/style/dedecms.css)中添加以下样式:
/* 幻灯片基础样式 */
.focusBox{ width: 100%; height: 200px; margin: 0 auto; overflow: hidden; position: relative; }
.focusBox .bd{ position: relative; height: 100%; z-index: 0; }
.focusBox .bd li{ width: 100%; height: 100%; float: left; }
.focusBox .bd li img{ width: 100%; height: 100%; display: block; }
.focusBox .hd{ position: absolute; z-index: 1; bottom: 10px; right: 10px; }
.focusBox .hd ul{ text-align: center; }
.focusBox .hd ul li{ 
    display: inline-block; 
    width: 8px; 
    height: 8px; 
    background: rgba(255,255,255,0.5); 
    margin: 0 4px; 
    cursor: pointer; 
    border-radius: 50%;
}
.focusBox .hd ul li.on{ 
    background: #fff; 
}

注意.focusBoxheight 高度需要根据你的图片尺寸进行修改,height: 300px;


手动编写代码(更灵活,适合自定义)

如果你对HTML、CSS、JS比较熟悉,可以完全手动控制幻灯片,不受DedeCMS默认模块的限制。

dede手机幻灯片代码
(图片来源网络,侵删)

第1步:编写HTML结构

在首页模板 index.htm 中,添加以下HTML结构:

<div class="my-slide">
    <div class="slide-container">
        <div class="slide-item">
            <a href="链接1">
                <img src="图片1.jpg" alt="描述1">
            </a>
        </div>
        <div class="slide-item">
            <a href="链接2">
                <img src="图片2.jpg" alt="描述2">
            </a>
        </div>
        <div class="slide-item">
            <a href="链接3">
                <img src="图片3.jpg" alt="描述3">
            </a>
        </div>
    </div>
    <div class="slide-dots">
        <span class="dot active"></span>
        <span class="dot"></span>
        <span class="dot"></span>
    </div>
</div>

第2步:编写CSS样式

在CSS文件中添加样式,让幻灯片看起来像样:

.my-slide { 
    width: 100%; 
    height: 300px; /* 根据图片高度设定 */
    position: relative; 
    overflow: hidden;
}
.slide-container {
    display: flex;
    width: 100%; /* 3 * 100% = 300% */
    height: 100%;
    transition: transform 0.5s ease-in-out;
}
.slide-item {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}
.slide-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证图片不变形 */
}
.slide-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}
.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}
.dot.active {
    background-color: #fff;
}

第3步:编写JavaScript逻辑

在页面底部添加JS代码,实现自动轮播和点击切换功能。

<script>
document.addEventListener('DOMContentLoaded', function() {
    const container = document.querySelector('.slide-container');
    const dots = document.querySelectorAll('.dot');
    let currentIndex = 0;
    const totalSlides = dots.length;
    function goToSlide(index) {
        container.style.transform = `translateX(-${index * 100}%)`;
        dots.forEach(dot => dot.classList.remove('active'));
        dots[index].classList.add('active');
        currentIndex = index;
    }
    // 自动播放
    setInterval(() => {
        currentIndex = (currentIndex + 1) % totalSlides;
        goToSlide(currentIndex);
    }, 3000); // 每3秒切换一次
    // 点击小圆点切换
    dots.forEach((dot, index) => {
        dot.addEventListener('click', () => {
            goToSlide(index);
        });
    });
});
</script>

如何适配手机(响应式设计)

无论是哪种方法,适配手机的关键在于CSS。

  1. 使用相对单位

    • 将幻灯片的宽度设置为 width: 100%;
    • 将幻灯片的高度设置为 height: 0;,然后通过 padding-bottom 来控制宽高比,这是目前最推荐的方法,可以保证图片在任何尺寸下都不会变形。

    修改后的CSS(推荐)

    .focusBox, .my-slide {
        width: 100%;
        position: relative;
        overflow: hidden;
        /* 假设你想要一个 16:9 的比例 */
        padding-bottom: 56.25%; 
        height: 0;
    }
    .focusBox .bd li, .slide-item {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .focusBox .bd li img, .slide-item img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 关键属性,让图片填充区域且不变形 */
    }
    /* 其他小圆点、箭头等元素也需要用绝对定位来调整位置 */
    .focusBox .hd {
        position: absolute;
        bottom: 10px;
        /* ... 其他样式 ... */
    }
  2. 添加viewport标签: 确保你的首页模板 <head> 标签内有以下meta标签,这能让浏览器正确地缩放页面以适应设备屏幕。

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
方法 优点 缺点 适用人群
自带模块 官方支持,稳定,通过后台管理内容,方便快捷。 灵活性差,样式和JS受限于系统自带模板。 新手、大多数网站
手动编写 灵活性极高,可以完全自定义样式和交互逻辑。 需要一定的前端开发能力,维护成本稍高。 有前端基础,追求个性化开发的用户

对于绝大多数用户,强烈推荐使用方法一,它简单、高效,且足够稳定,只有当你对幻灯片有非常特殊的需求时,才考虑方法二。

-- 展开阅读全文 --
头像
手机带会员功能是什么?
« 上一篇 今天
dede后台留言板如何回复?
下一篇 » 今天

相关文章

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

目录[+]