Cycle2幻灯片显示youtube

时间:2014-09-09 20:43:01

标签: javascript jquery youtube jquery-cycle2

我对youtube cycle2插件有疑问。

以下是设置代码的方式:

    data-cycle2-slides            ='>a'
    data-cycle2-easing            ='".$easing."' 
    data-cycle2-fx                ='".$effect."' 
    data-cycle2-timeout           ='".$timeout."' 
    data-cycle2-pause-on-hover    ='".$pause."' 
    data-cycle2-speed             ='".$speed."'
    data-cycle2-youtube            ='true'
    data-cycle2-youtube-autostart  ='true'
    data-cycle2-youtube-autostop   ='true'

这就是我调用视频的方式:

    <div class="slideshow cycle2-slideshow">
      <a href="http://www.youtube.com/v/boi9_JIEe-Y?hl=en_US&amp;version=3&amp;rel=0" >1</a>
      <a href="http://www.youtube.com/v/srKLoOBqt0w?version=3&amp;hl=en_US&amp;rel=0" >2</a>
      <a href="http://www.youtube.com/v/NLdXk21ZaYw?hl=en_US&amp;version=3&amp;rel=0" >3</a>
      <a href="http://www.youtube.com/v/KPOvBPRYkts?hl=en_US&amp;version=3&amp;rel=0" >4</a>    
     </div>

我的基础是http://jquery.malsup.com/cycle2/demo/video.php的文档。我遇到的问题是视频没有显示。有原因吗?

感谢你。

2 个答案:

答案 0 :(得分:0)

也许在元素中声明数据属性可能会有所帮助。这是他们应该宣布的方式。

<div 
     class="slideshow cycle-slideshow"
     data-cycle-slides            ='>a'
     data-cycle-easing            ='".$easing."' 
     data-cycle-fx                ='".$effect."' 
     data-cycle-timeout           ='".$timeout."' 
     data-cycle-pause-on-hover    ='".$pause."' 
     data-cycle-speed             ='".$speed."'
     data-cycle-youtube            ='true'
     data-cycle-youtube-autostart  ='true'
     data-cycle-youtube-autostop   ='true'
 >
           <a href="http://www.youtube.com/v/boi9_JIEe-Y?hl=en_US&amp;version=3&amp;rel=0" >1</a>
           <a href="http://www.youtube.com/v/srKLoOBqt0w?version=3&amp;hl=en_US&amp;rel=0" >2</a>
           <a href="http://www.youtube.com/v/NLdXk21ZaYw?hl=en_US&amp;version=3&amp;rel=0" >3</a>
           <a href="http://www.youtube.com/v/KPOvBPRYkts?hl=en_US&amp;version=3&amp;rel=0" >4</a>    
          </div>

我还要确保PHP正确呈现,这样就不会弄乱你的HTML和数据属性。

编辑:正如提到的另一个答案,数据属性和类应该是cycle而不是cycle2

答案 1 :(得分:0)

一些事情;

cycle2-slideshow应为cycle-slideshow(删除&#34; 2&#34;)

例如。 <div class="slideshow cycle-slideshow">

数据属性应以data-cycle-XXXX开头,而不是data-cycle2-XXXX(删除&#34; 2&#34;)

例如。 data-cycle-slides = '>a'

DEMO