织梦CMS本身并没有一个功能强大、开箱即用的“图片滚动模块”，它主要提供的是基础的数据调用标签，开发者或站长需要利用这些标签，结合HTML和JavaScript来实现各种滚动效果。
（图片来源网络，侵删）
“默认的图片滚动代码”通常指的是官方模板中或社区里最常用、最经典的实现方式，下面我将为你分解这个经典实现，并提供几种常见的滚动效果代码。
核心组成部分
一个完整的图片滚动功能通常由三部分组成：
- 数据调用标签 (织梦核心)：用于从数据库中获取你需要展示的图片、标题和链接等信息。
- HTML结构 (骨架)：定义图片、标题等内容在页面上的布局。
- CSS样式 (美化)：控制图片、滚动区域的外观，包括尺寸、边距、过渡效果等。
- JavaScript脚本 (动画引擎)：实现滚动的核心逻辑，如无缝滚动、自动播放、鼠标悬停暂停等。
数据调用标签 (织梦Dede标签)
这是第一步,也是最重要的一步，你需要用织梦的标签来获取文章数据，通常是带有缩略图的文章列表。
最常用的是 arclist 标签，它可以调用指定栏目下的文章列表。
（图片来源网络，侵删）
基本语法示例：
{dede:arclist typeid='栏目ID' row='10' titlelen='30' imgwidth='120' imgheight='90'}
<li>
<a href="[field:arcurl/]" title="[field:title/]">
<img src="[field:litpic/]" alt="[field:title/]" />
<span class="title">[field:title/]</span>
</a>
</li>
{/dede:arclist}
参数解释：
typeid='栏目ID': 必须指定，你要从这个栏目下获取文章。typeid='2'表示调用ID为2的栏目下的文章。row='10': 调用10条文章数据，len='30'`: 标题字符长度，超过30个字符会自动截断。imgwidth='120'和imgheight='90': 获取的缩略图的宽度和高度（单位：像素），这有助于规范图片尺寸，保证滚动效果整齐。[field:arcurl/]: 文章的链接地址。[field:litpic/]: 文章的缩略图地址。[field:title/]: 文章的标题。
经典无缝滚动代码示例
下面我将提供几种最流行的滚动效果代码,你可以直接复制使用，只需修改 typeid 和图片路径即可。
示例1：左右无缝滚动（最经典）
这种效果在网站首页非常常见,通常用于展示产品、新闻或合作伙伴。
（图片来源网络，侵删）
HTML 结构
<div class="scroll-box">
<div class="scroll-title">图片滚动展示</div>
<div id="scrollDiv" class="scroll-list">
<!-- 织梦数据调用标签放在这里 -->
{dede:arclist typeid='2' row='10' titlelen='20' imgwidth='100' imgheight='75'}
<div class="scroll-item">
<a href="[field:arcurl/]" title="[field:title/]">
<img src="[field:litpic/]" alt="[field:title/]">
<p>[field:title/]</p>
</a>
</div>
{/dede:arclist}
</div>
</div>
CSS 样式
/* 滚动容器 */
.scroll-box {
width: 980px;
margin: 20px auto;
border: 1px solid #ddd;
padding: 10px;
background: #f9f9f9;
}
.scroll-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
border-bottom: 2px solid #0066cc;
padding-bottom: 5px;
}
/* 滚动列表 */
.scroll-list {
width: 100%;
height: 100px; /* 固定高度，超出部分隐藏 */
overflow: hidden;
position: relative;
}
/* 滚动项 */
.scroll-item {
float: left;
width: 100px;
height: 100px;
margin-right: 15px;
text-align: center;
}
.scroll-item img {
width: 100px;
height: 75px;
border: 1px solid #ccc;
}
.scroll-item p {
margin-top: 5px;
font-size: 12px;
white-space: nowrap; /* 防止标题换行 */
overflow: hidden;
text-overflow: ellipsis; /* 超出部分显示省略号 */
}
JavaScript 脚本
<script type="text/javascript">
// 等待文档加载完成
window.onload = function() {
var scrollDiv = document.getElementById("scrollDiv");
var speed = 30; // 滚动速度，数值越大越慢
var scrollWidth = scrollDiv.scrollWidth; // 获取内容的总宽度
// 克隆一份内容，用于无缝衔接
var cloneContent = scrollDiv.innerHTML;
scrollDiv.innerHTML += cloneContent;
// 滚动函数
function Marquee() {
// 如果滚动距离大于内容总宽度，则重置位置
if (scrollDiv.scrollLeft >= scrollWidth) {
scrollDiv.scrollLeft = 0;
} else {
scrollDiv.scrollLeft++;
}
}
// 设置定时器，实现自动滚动
var myMarquee = setInterval(Marquee, speed);
// 鼠标悬停时暂停滚动
scrollDiv.onmouseover = function() {
clearInterval(myMarquee);
};
// 鼠标移出时继续滚动
scrollDiv.onmouseout = function() {
myMarquee = setInterval(Marquee, speed);
};
};
</script>
示例2：上下无缝滚动
将左右滚动的代码稍作修改即可实现上下滚动。
HTML 结构 (只需修改 class)
<div class="scroll-box">
<div class="scroll-title">上下滚动展示</div>
<div id="scrollDiv" class="scroll-list-vertical"> <!-- 修改class -->
{dede:arclist typeid='2' row='10' titlelen='20' imgwidth='120' imgheight='90'}
<div class="scroll-item-vertical"> <!-- 修改class -->
<a href="[field:arcurl/]" title="[field:title/]">
<img src="[field:litpic/]" alt="[field:title/]">
<p>[field:title/]</p>
</a>
</div>
{/dede:arclist}
</div>
</div>
CSS 样式 (修改浮动和方向)
/* 滚动列表 - 上下滚动 */
.scroll-list-vertical {
width: 150px;
height: 300px; /* 固定高度 */
overflow: hidden;
position: relative;
}
/* 滚动项 - 上下滚动 */
.scroll-item-vertical {
height: 120px; /* 固定每个项的高度 */
margin-bottom: 10px;
text-align: center;
}
.scroll-item-vertical img {
width: 120px;
height: 90px;
border: 1px solid #ccc;
}
JavaScript 脚本 (修改滚动属性)
<script type="text/javascript">
window.onload = function() {
var scrollDiv = document.getElementById("scrollDiv");
var speed = 30;
var scrollHeight = scrollDiv.scrollHeight; // 获取内容总高度
var cloneContent = scrollDiv.innerHTML;
scrollDiv.innerHTML += cloneContent;
function Marquee() {
if (scrollDiv.scrollTop >= scrollHeight) {
scrollDiv.scrollTop = 0;
} else {
scrollDiv.scrollTop++;
}
}
var myMarquee = setInterval(Marquee, speed);
scrollDiv.onmouseover = function() {
clearInterval(myMarquee);
};
scrollDiv.onmouseout = function() {
myMarquee = setInterval(Marquee, speed);
};
};
</script>
使用更现代的方案 (推荐)
对于新项目,或者希望有更丰富效果（如轮播、渐变、触摸滑动等）的场景，强烈推荐使用成熟的 jQuery 轮播插件。
为什么推荐？
- 效果丰富：无缝滚动、淡入淡出、3D翻转等效果应有尽有。
- 功能强大：支持自动播放、分页器、前后按钮、触摸滑动等。
- 代码简洁：你只需要提供HTML结构和调用织梦标签，大部分工作由插件完成。
- 兼容性好：插件通常已经处理了各种浏览器的兼容性问题。
常用插件：
- Slick: 功能强大，性能优秀，高度可定制。
- Swiper: 专注于移动端和触控，非常适合响应式网站。
- Bootstrap Carousel: 如果你已经在使用Bootstrap框架，这是最方便的选择。
以 Slick 为例的集成步骤：
- 引入文件：在页面
<head>中引入 Slick 的 CSS 和 JS 文件。 - 编写HTML：用织梦标签构建一个简单的列表结构。
- 调用插件：用几句简单的JS代码来初始化轮播。
<!-- 1. 引入文件 -->
<link rel="stylesheet" type="text/css" href="path/to/slick.css"/>
<script type="text/javascript" src="path/to/jquery.min.js"></script>
<script type="text/javascript" src="path/to/slick.min.js"></script>
<!-- 2. HTML结构 -->
<div class="your-slick-carousel">
{dede:arclist typeid='2' row='5' titlelen='20' imgwidth='300' imgheight='200'}
<div>
<a href="[field:arcurl/]">
<img src="[field:litpic/]" alt="[field:title/]">
<h3>[field:title/]</h3>
</a>
</div>
{/dede:arclist}
</div>
<!-- 3. 调用插件 -->
<script type="text/javascript">
$(document).ready(function(){
$('.your-slick-carousel').slick({
dots: true, // 显示分页点
infinite: true, // 无限循环
speed: 500, // 动画速度
autoplay: true, // 自动播放
autoplaySpeed: 3000 // 自动播放间隔
});
});
</script>
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 原生JS滚动 | 无需额外库，轻量级 | 效果单一，代码复杂，兼容性需自己处理 | 简单的、要求极低滚动效果的旧项目或学习 |
| jQuery插件 | 效果丰富，功能强大，开发效率高 | 需要引入jQuery和插件文件，增加页面体积 | 绝大多数现代网站，尤其是对用户体验要求高的项目 |
对于织梦CMS用户,如果你只是想在现有模板上加一个简单的滚动，第一种原生JS方案足够了，如果你正在开发新网站或对效果有更高要求，强烈推荐使用jQuery插件方案。
