Jquery Cycle2:在同一个幻灯片中以不同的方式处理图像和视频
我一直在使用Cycle2在一个网站上的图片幻灯片，我已经被要求添加一个视频到幻灯片。
在静态html文件的测试中，由于malsup.com网站上显示的示例，我设法使视频正常工作。
然而，当它有图像和视频的组合时，我无法很好地理解幻灯片的工作方式。
当幻灯片只是图像时，我在幻灯片调用中使用了这段代码，它非常好地工作：
数据周期.延迟=“1000”数据周期.超时值=“5000”数据周期.速度=“900”数据周期.暂停-对悬停=“真”
但是，除非我将数据周期超时的5000更改为0，如下所示，视频在进入下一张幻灯片之前只播放一小段时间：
数据周期超时=“0”
是否有一种方法可以让Cycle2在一张幻灯片中对图像和视频的行为有所不同？
如果有图像，用这个..。
数据周期.超时=“5000”数据周期.暂停-对-悬停=“真”
如果是视频，用这个..。
数据周期超时=“0”
理想的情况下，幻灯片中的任何图片都会在数到5000之后进入下一张幻灯片，而任何视频在进入下一张幻灯片之前都会播放它们的全部长度。例如，你有一张幻灯片，内容如下：
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
有人知道如何在Cycle2中实现这样的目标吗？
CMS是一个MODx站点，所以大多数代码都应该工作。
提前感谢您的帮助。(对格式错误表示歉意。我在创建小提琴时遇到了困难，所以我粘贴了测试html的完整代码.)
<!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&hl=en_US&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&hl=en_US&rel=0">Alex Russel</a>
</div>
<div class=center>
<a href=# id=prev2><<Prev </a>
<a href=# id=next2> Next>></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>回答 2
Stack Overflow用户
发布于 2016-01-13 18:59:03
我认为最好的方法是使用Cycle2的API (http://jquery.malsup.com/cycle2/api/)手动重新创建自动播放功能。这将允许您设置每次幻灯片的时间，并根据事件提前，而不是计时器。粗略地说，我就是这样做的：
首先，给每个幻灯片一个类或数据属性，以区分包含视频和包含图像的幻灯片。
使用paused选项启动幻灯片暂停，这样它就不会单独前进
使用以下逻辑创建cycle-initialized (幻灯片准备就绪时调用)和cycle-after (在幻灯片转换后调用)事件处理程序：
测试当前幻灯片是否是使用您添加的特殊类的图像或视频。
如果是图像幻灯片，则创建一个等待5000‘s的setTimeout，然后调用$('.cycle-slideshow').cycle('next')以推进幻灯片显示
如果是视频幻灯片，请使用YouTube API (reference#Events)连接到播放机的onStateChange事件。当状态更改为0(这意味着视频已经结束)时，调用$('.cycle-slideshow').cycle('next')以推进幻灯片显示。您不能仅仅将超时设置为视频的长度，因为用户可能会暂停视频，或者必须等待缓冲。你不想让它在比赛中前进！
希望这能帮上忙！
Stack Overflow用户
发布于 2018-02-28 12:44:51
$('#slider').cycle({
fx: 'scrollHorz',
slides: '.slide',
timeout: 6000,
pagerActiveClass: 'active'
});#slider {
width: 100%;
margin: 0;
border: 0;
.slide {
width: 100%;
display: none;
&:first-child {
display: block;
}
.slide-inner {
position: relative;
img {
width: 100%;
}
}
}
}
.video-wrap {
position: relative;
//slider resolution = 1600 x 650, so this percentage is from 650/1600=0.40625
padding-bottom: 40.625%;
height: 0;
overflow: hidden;
}
.video-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}<div id="slider" class="slider">
<div class="slide">
<img src="http://via.placeholder.com/1600x650" class="slide-image" alt="">
</div>
<!-- slide -->
<div class="slide">
<div class="video-wrap">
<iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/Lscb4SL58X4?enablejsapi=1"></iframe> </div>
</div>
<!-- slide -->
</div>
<!-- slider -->
有关更多细节，请参考此链接。我认为哪一种有用
https://www.minddevelopmentanddesign.com/blog/create-a-responsive-youtube-video-slider/
https://stackoverflow.com/questions/34650242
复制相似问题
腾讯云开发者
