【问题标题】:Replacing <img> tags in cycle2.js替换 cycle2.js 中的 <img> 标签
【发布时间】:2015-07-15 23:43:43
【问题描述】:

我想使用 cycle2.js 滑块。我要循环的每个元素都是一个包含多个文章标签的 div 元素。

我可以用 div 替换 img 标签吗?怎么样?

<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=0
    >
    <!-- prev/next links -->
    <div class="cycle-prev"></div>
    <div class="cycle-next"></div>
    <img src="http://malsup.github.io/images/p1.jpg"> <!-- Can I convert img tags to div elements? -->
    <img src="http://malsup.github.io/images/p2.jpg">
    <img src="http://malsup.github.io/images/p3.jpg">
    <img src="http://malsup.github.io/images/p4.jpg">
</div>

我现在正试图让 JS 显示三篇文章,并在经过一定时间后更改正在显示的三篇文章。考虑使用此代码的页面在奇数(损坏)位置一次显示一篇文章。是不是我做错了什么?

<div class="cycle-slifdshow" data-cycle-slider="div">
  <div class="three-at-a-time">
    <article> ...</article>
    <article>...</article>
    <article>...</article>
  </div>
  <div class='three-at-a-time>
    ...
  </div>
  ...
</div>

【问题讨论】:

    标签: jquery html image replace cycle2


    【解决方案1】:

    文档说是http://jquery.malsup.com/cycle2/faq/#non-image

    我想使用不是图片的幻灯片。我如何告诉 Cycle2 我的 幻灯片是什么?

    使用 data-cycle-slides 属性提供一个 jQuery 选择器标识容器中的元素 幻灯片。例如,如果您的幻灯片是带有 li 的 ul 幻灯片 会像这样设置属性:data-cycle-slides="li"

    <ul class="cycle-slideshow" data-cycle-slides="li">
         <li><img src="path/to/some/image1.jpg"></li>
         <li><img src="path/to/some/image2.jpg"></li>
         <li><img src="path/to/some/image3.jpg"></li>
    </ul>
    

    【讨论】:

    • 我刚刚注意到 stackoverflow 不允许您在回复中使用格式化代码进行回复。我将编辑我原来的问题以反映我的立场。感谢您的回答!
    猜你喜欢
    • 1970-01-01
    • 2013-05-26
    • 2019-02-05
    • 1970-01-01
    • 2012-11-26
    • 2014-03-12
    • 1970-01-01
    • 2021-08-01
    • 2015-09-19
    相关资源
    最近更新 更多