cycle2使用“循环后”在幻灯片上的文本动画
cycle2使用“循环后”在幻灯片上的文本动画
提问于 2014-07-15 18:34:29
我正在尝试使文本slide或fade in在幻灯片完成转换到下一张幻灯片后被隐藏。一个例子是本网站上的幻灯片。
我试图使用“循环后”事件( cycle-2 API已指定 )来完成这一任务，但是我对jQuery并不熟悉，我也不确定要在事件中放置哪些事件处理程序代码来实现这种效果，即：
$( '#mySlideshow' ).on( 'cycle-after', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
// I'm not sure what to put here to make this effect//
});我知道我需要用文本制作div并将它们插入到jQuery中，我只是不知道实现这种效果的正确代码。
此外，我希望文本看起来类似于我前面提到的网站，这就是为什么我没有在cycle2中使用覆盖功能。
到目前为止，我的代码如下：
HTML:
<script type id="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2 /jquery.min.js"></script>
<script type id="text/javascript" src="https://malsup.github.io/min/jquery.cycle2.min.js"></script>
</head>
<body>
<div id="container">
<div class="cycle-slideshow"
data-cycle-fx=scrollHorz
data-cycle-timeout=4000
data-cycle-slides="> a"
data-cycle-pause-on-hover="true"
>
<div class="cycle-prev"></div>
<div class="cycle-next"></div>
<a href="">
<img src="http://i1255.photobucket.com/albums/hh628/prestonhitzler/moss1resize_zps6b660b8e.jpg" />
</a>
<a href="">
<img src="http://i1255.photobucket.com/albums/hh628/prestonhitzler/moss2resize_zps2fb527e4.jpg" />
</a>
<a href="">
<img src="http://i1255.photobucket.com/albums/hh628/prestonhitzler/moss3resize_zpsffdcdbd2.jpg" />
</a>
<a href="">
<img src="http://i1255.photobucket.com/albums/hh628/prestonhitzler/moss4resize_zps8d09372f.jpg" />
</a>
<a href="">
<img src="http://i1255.photobucket.com/albums/hh628/prestonhitzler/moss5resize_zpscb87b4ed.jpg" />
</a>
</div><!-- slideshow -->
</div><!-- container -->
</body>CSS:
<style type="text/css">
.cycle-slideshow, .cycle-slideshow * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.cycle-slideshow {
width: 100%;
min-width: 320px;
max-width: 960px;
margin: 10px auto;
padding: 0;
position: relative;
background: url(http://malsup.github.com/images/spinner.gif) 50% 50% no-repeat;
}
.cycle-slideshow img:first-child {
position: static;
z-index: 100;
}
.cycle-slideshow img {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 0;
display: block;
}
.cycle-slideshow a{
display: block;
width: 100%;
}
.cycle-prev, .cycle-next {
position: absolute;
top: 35%;
width: 6.68%;
height: 23%;
opacity: 0.3;
z-index: 800;
cursor: pointer;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.cycle-prev{
background: url('http://i1255.photobucket.com/albums/hh628/prestonhitzler/Arrow- Back1_zps9f5ab580.png') 50% 50% no-repeat;
left: 0;
background-size: 100%;
}
.cycle-next{
background: url('http://i1255.photobucket.com/albums/hh628/prestonhitzler/Arrows- Forward1_zps598390d7.png') 50% 50% no-repeat;
right: 0;
background-size: 100%;
}
.cycle-prev:hover, .cycle-next:hover {
opacity: 0.5;
}
</style>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2014-07-15 19:51:56
您将需要循环一组容器。
<div class='cycle-wrap'>
<div class='slide'></div>
<div class='slide'></div>
</div>在每个容器中，您将放置您的图像和覆盖内容。
<div class='slide'>
<img src='' />
<div class='content'></div>
</div>这些将需要这样的定位：
.slide {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
}
.slide > img {
position: absolute;
width: 100%;
height: auto; //these numbers can obviously be more specific dimensions
}
.slide > .content
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: .3s;
z-index: 10;
}
.slide.cycle-slide-active > .content
opacity: 1;
transition: .3s;
}现在，无论您在.content中为每一张幻灯片放入什么内容，都将在任何幻灯片周期中加入.Cycle-幻灯片-active类。任何时候都不需要额外的jQuery。
要使循环插件附加到.slide元素，更改创建循环的方式，以指示它应该循环.slide：
<div class="cycle-slideshow" data-cycle-slides=".slide">页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24765637
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号