Jquery循环2：在同一幻灯片中以不同方式处理图像和视频_Jquery_Jquery Cycle2

Jquery循环2：在同一幻灯片中以不同方式处理图像和视频

jquery

Jquery循环2：在同一幻灯片中以不同方式处理图像和视频,jquery,jquery-cycle2,Jquery,Jquery Cycle2,我一直在使用Cycle2在网站上播放图像幻灯片，有人要求我在幻灯片中添加视频在静态html文件的测试中，由于malsup.com网站上的示例，我成功地让视频正常工作然而，当幻灯片结合了图像和视频时，我不能完全按照我所希望的方式播放当幻灯片只是图像时，我在幻灯片调用中使用了以下代码，效果非常好：数据周期延迟=“1000” 数据周期超时=“5000” 数据循环速度=“900” 悬停时数据循环暂停=“真” 但是，除非我将“数据周期超时”的5000更改为0，如下图所示，否则视频在进入下一张幻灯片

我一直在使用Cycle2在网站上播放图像幻灯片，有人要求我在幻灯片中添加视频

在静态html文件的测试中，由于malsup.com网站上的示例，我成功地让视频正常工作

然而，当幻灯片结合了图像和视频时，我不能完全按照我所希望的方式播放

当幻灯片只是图像时，我在幻灯片调用中使用了以下代码，效果非常好：

数据周期延迟=“1000” 数据周期超时=“5000” 数据循环速度=“900” 悬停时数据循环暂停=“真”

但是，除非我将“数据周期超时”的5000更改为0，如下图所示，否则视频在进入下一张幻灯片之前只播放一小段时间：

数据周期超时=“0”

Cycle2有没有办法让它在一张幻灯片中的图像和视频表现不同

如果是图像，请使用此

数据周期超时=“5000” 悬停时数据循环暂停=“真”

如果是视频，请使用此

数据周期超时=“0”

理想情况下，幻灯片中的任何图像在计数5000后都会进入下一张幻灯片，而任何视频都会在进入下一张幻灯片之前播放完整长度。例如，假设您有一个包含以下内容的幻灯片：

有人知道如何通过Cycle2实现这样的目标吗

CMS是一个MODx站点，所以大多数代码都可以工作

提前感谢您的帮助。（对于错误的格式表示歉意。我在创建小提琴时遇到了麻烦，因此我粘贴了测试html的完整代码…）


Cycle2 YouTube
.循环幻灯片放映{最大宽度：640px；边距：自动}
.循环幻灯片>div{宽度：100%；高度：100%}
.cycle slideshow>img{宽度：100%；高度：100%}
.循环幻灯片>视频{宽度：100%；高度：100%}
iframe，对象，嵌入{宽度：100%；高度：100%}
视频和图像

我认为最好的方法是使用Cycle2的API（）手动重新创建自动播放功能。这将允许您设置每张幻灯片的时间，并根据事件而不是计时器提前。大致上，我会这样做：

首先，为每张幻灯片指定一个类或数据属性，以区分包含视频的幻灯片和包含图像的幻灯片

使用

paused

选项启动已暂停的幻灯片放映，这样它就不会自行前进

使用以下逻辑创建

cycle initialized

（幻灯片放映就绪时调用）和

cycle after

（幻灯片转换后调用）事件处理程序：

使用您添加的特殊类测试当前幻灯片是图像还是视频

如果是图像幻灯片，请创建一个等待5000ms的

setTimeout

，然后调用

$（'.cycle slideshow'）。cycle（'next'）

以推进幻灯片放映

如果是视频幻灯片，请使用YouTube API（）连接播放器的

onStateChange

事件。当状态更改为0（这意味着视频已结束）时，调用

$（'.cycle slideshow'）.cycle（'next'）

以推进幻灯片放映。您不能只将超时设置为视频的长度，因为用户可能会暂停视频，或者视频可能需要等待缓冲。你不想让它在比赛进行到一半的时候

希望有帮助

$（“#滑块”）。循环({
fx:‘滚动人’，
幻灯片：“.幻灯片”，
超时：6000，
pagerActiveClass:“活动”
});
#滑块{
宽度：100%；
保证金：0；
边界：0；
.幻灯片{
宽度：100%；
显示：无；
&：第一个孩子{
显示：块；
}
.内部滑动{
位置：相对位置；
img{
宽度：100%；
}
}
}
}
.video wrap{
位置：相对位置；
//滑块分辨率=1600 x 650，因此该百分比为650/1600=0.40625
垫底：40.625%；
身高：0；
溢出：隐藏；
} 
.video wrap iframe{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
你好，Ryan，感谢您的回复。这听起来确实可行，你的逻辑听起来很棒。添加一个类或数据属性来区分图像和视频是一个好主意。我能做到这一点。那我就卡住了！（我不是程序员）。视频可以是html5托管的视频、youtube视频（或者我猜是vimeo）。我想你没有时间给我做小提琴吧？或者我可以直接与您联系，要求报价以准备文件吗？（不确定它是否适用于堆栈交换，如果不适用，则很抱歉）
   slide 1 = image (action: show for 5 seconds, then progress to next slide)
   slide 2 = 5 minute video (action: show the full 5 minute video, then progress to next slide)
   slide 3 = image (action: show for 5 seconds, then progress to next slide)
   slide 4 = image (action: show for 5 seconds, then progress to next slide)
   slide 5 = 3 minute video (action: show the full 3 minute video, then progress to next slide)
   loop

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Cycle2 YouTube</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>


<style>
.cycle-slideshow { max-width: 640px; margin: auto }
.cycle-slideshow > div { width: 100%; height: 100% }
.cycle-slideshow > img { width: 100%; height: 100% }
.cycle-slideshow > video { width: 100%; height: 100% }
iframe,object,embed { width: 100%; height: 100% }
</style>


</head>
<body>

<div id="main">


<h2>Videos and Images</h2>

<div class="cycle-slideshow"
   data-cycle-fx="scrollHorz"
   data-cycle-timeout="0"
   data-cycle-delay="1000"
   data-cycle-speed="900"
   data-cycle-pause-on-hover="true"
    data-cycle-prev="#prev2"
    data-cycle-next="#next2"
    data-cycle-slides=">a,>img,>video"
    data-cycle-youtube=true
    data-cycle-youtube-autostart=true
    >

    <img src="http://jquery.malsup.com/cycle2/images/p1.jpg">

    <a href="http://www.youtube.com/v/f7AU2Ozu8eo?version=3&amp;hl=en_US&amp;rel=0">Paul Irish</a>

    <img src="http://jquery.malsup.com/cycle2/images/p2.jpg">

    <a href="http://www.youtube.com/v/seX7jYI96GE?version=3&amp;hl=en_US&amp;rel=0">Alex Russel</a>

</div>
<div class=center>
    <a href=# id=prev2>&lt;&lt;Prev </a>
    <a href=# id=next2> Next&gt;&gt;</a>
</div>


</div> <!-- #main -->



<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.video.js"></script>


</body>
</html>