搜索
DEDE建站

dede图片滚动如何实现点停效果？

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

核心原理

这个效果的实现依赖于三个部分：

  1. HTML: 创建一个包含图片列表的容器。
  2. CSS: 设置图片容器的样式，包括大小、溢出隐藏，以及实现“无缝滚动”的关键。
  3. JavaScript: 监听鼠标事件（onmouseover 和 onmouseout）,控制CSS动画的播放和暂停。

使用 CSS animation + JavaScript (推荐，性能更好)

这种方法是目前最主流的实现方式，代码简洁,性能优异。

第1步：准备你的图片列表

在DedeCMS后台，你需要准备好一个图集或者多张图片,这里我们以一个文章调用多张图片为例。

假设你要在某个模板文件（如 index.htm）中调用,你可以使用Dede的标签获取图片列表。

如果你想在文章内容页（article_article.htm）中调用该文章的图集图片,你可以这样写：

<div id="scroll-container">
  <div id="scroll-content">
    {dede:field name='imgurls' function='Getimgs(@me, 600, 400, 1)'/}
  </div>
  <!-- 为了无缝循环，我们需要将内容再复制一份 -->
  <div id="scroll-content2"></div>
</div>
  • {dede:field name='imgurls'} 是获取文章的图集字段。
  • function='Getimgs(@me, 600, 400, 1)' 是调用一个系统函数来解析图集，参数分别是宽度、高度和是否显示标题。1表示不显示标题。

这行代码会生成类似下面的HTML结构：

<div id="scroll-container">
  <div id="scroll-content">
    <img src='/uploads/230101/1-2301011GJ3530.jpg' width='600' height='400' alt='' />
    <img src='/uploads/230101/1-2301011GJ3531.jpg' width='600' height='400' alt='' />
    <img src='/uploads/230101/1-2301011GJ3532.jpg' width='600' height='400' alt='' />
  </div>
  <div id="scroll-content2">
    <img src='/uploads/230101/1-2301011GJ3530.jpg' width='600' height='400' alt='' />
    <img src='/uploads/230101/1-2301011GJ3531.jpg' width='600' height='400' alt='' />
    <img src='/uploads/230101/1-2301011GJ3532.jpg' width='600' height='400' alt='' />
  </div>
</div>

注意，我们手动复制了一份内容到 scroll-content2 中,这是实现无缝循环滚动的关键。

第2步：添加CSS样式

在模板文件的 <head> 标签内，或者在外部CSS文件中,添加以下样式：

<style type="text/css">
  /* 容器样式 */
  #scroll-container {
    width: 600px; /* 设置你想要的宽度 */
    height: 400px; /* 设置你想要的高度 */
    overflow: hidden; /* 隐藏超出容器的内容 */
    position: relative;
    margin: 0 auto; /* 居中显示 */
    border: 1px solid #eee; /* 可选：加个边框 */
  }
  /* 滚动内容样式 */
  #scroll-content, #scroll-content2 {
    display: flex; /* 使用Flexbox布局，让图片水平排列 */
    position: absolute;
    top: 0;
    left: 0;
    width: fit-content; /* 宽度由内容撑开 */
    animation: scroll-left 15s linear infinite; /* 核心动画：15秒向左滚动，无限循环 */
  }
  /* 鼠标悬停时暂停动画 */
  #scroll-container:hover #scroll-content,
  #scroll-container:hover #scroll-content2 {
    animation-play-state: paused;
  }
  /* 定义滚动动画 */
  @keyframes scroll-left {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%); /* 向左移动50%的宽度，正好移动到第一份内容的末尾 */
    }
  }
  /* 图片样式，可选 */
  #scroll-content img, #scroll-content2 img {
    margin-right: 10px; /* 图片之间的间距 */
  }
</style>

第3步：添加JavaScript（可选，但更灵活）

上面的CSS方法已经可以实现暂停，但有时我们需要更精细的控制，或者在某些旧浏览器中兼容性更好,这时可以加上JS。

<script type="text/javascript">
  window.onload = function() {
    const container = document.getElementById('scroll-container');
    const content = document.getElementById('scroll-content');
    const content2 = document.getElementById('scroll-content2');
    // 鼠标悬停时暂停
    container.onmouseover = function() {
      content.style.animationPlayState = 'paused';
      content2.style.animationPlayState = 'paused';
    };
    // 鼠标移出时继续滚动
    container.onmouseout = function() {
      content.style.animationPlayState = 'running';
      content2.style.animationPlayState = 'running';
    };
  };
</script>

你可以把这段JS代码放在模板文件的 </body> 标签之前。

使用 JavaScript setInterval (传统方法)

这种方法通过JS定时器来不断改变图片的位置来实现滚动,兼容性非常好。

第1步：准备HTML

HTML结构比方法一简单,不需要复制内容。

<div id="js-scroll-container">
  <div id="js-scroll-content">
    <img src='/uploads/230101/1-2301011GJ3530.jpg' width='600' height='400' alt='' />
    <img src='/uploads/230101/1-2301011GJ3531.jpg' width='600' height='400' alt='' />
    <img src='/uploads/230101/1-2301011GJ3532.jpg' width='600' height='400' alt='' />
  </div>
</div>

第2步：添加CSS样式

<style type="text/css">
  #js-scroll-container {
    width: 600px;
    height: 400px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
  }
  #js-scroll-content {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    /* 初始位置 */
  }
  #js-scroll-content img {
    margin-right: 10px;
  }
</style>

第3步：添加JavaScript代码

这是实现滚动和暂停的核心。

<script type="text/javascript">
  window.onload = function() {
    const container = document.getElementById('js-scroll-container');
    const content = document.getElementById('js-scroll-content');
    let speed = 1; // 滚动速度，数值越大越快
    let timer = null;
    // 为了无缝滚动，需要克隆一份内容并追加到后面
    content.innerHTML += content.innerHTML;
    function scroll() {
      // 如果滚动距离超过了一半内容宽度，就重置位置
      if (container.scrollLeft >= content.scrollWidth / 2) {
        container.scrollLeft = 0;
      } else {
        container.scrollLeft += speed;
      }
    }
    // 启动定时器，开始滚动
    timer = setInterval(scroll, 30); // 每30毫秒滚动一次
    // 鼠标悬停时清除定时器，实现暂停
    container.onmouseover = function() {
      clearInterval(timer);
    };
    // 鼠标移出时重新启动定时器
    container.onmouseout = function() {
      timer = setInterval(scroll, 30);
    };
  };
</script>

总结与建议

特性 方法一 (CSS Animation) 方法二 (JS setInterval)
性能 高，由浏览器直接处理，更流畅。 较低，依赖JS定时器，可能占用更多CPU资源。
代码量 CSS稍复杂，JS简单。 JS逻辑稍复杂，CSS简单。
兼容性 现代浏览器支持良好，IE10+。 非常好，几乎所有浏览器都支持。
可控性 CSS控制，简单直接。 JS控制，非常灵活，可以动态改变速度等。

推荐使用方法一，因为它的性能优势非常明显，用户体验更好，除非你的项目需要兼容非常古老的浏览器（如IE9及以下）,否则应该优先选择CSS动画方案。

最终步骤：

  1. 在你的DedeCMS模板文件中，选择一个合适的位置（如首页、栏目页、文章页）。
  2. 根据你的需求，使用{dede:}标签获取图片列表。
  3. 将对应的HTML、CSS、JavaScript代码复制到模板文件中。
  4. 修改CSS中的宽度、高度、动画时间等参数,以适应你的网站风格。
  5. 保存模板文件，在DedeCMS后台生成页面,查看效果。
-- 展开阅读全文 --
头像
dede论坛邀请码插件如何获取与使用？
« 上一篇 03-15
dede按更新时间排序
下一篇 » 03-15

相关文章

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

目录[+]