Question

我正在尝试在幻灯片完成转换到下一张幻灯片后隐藏文字slide或fade in。一个例子是this website上的幻灯片。

我正在尝试使用cycle-2 API has specified的“循环后”事件来做到这一点，但是我并不精通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>

Answer 1

您需要循环一组容器。

<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;
}

现在无论你放入每个幻灯片的内容，你都会在任何幻灯片循环中添加.cycle-slide-active类。没有额外的jQuery是必要的。

要使循环插件附加到.slide元素，请更改创建循环的方式，以指示它应循环.slide：

<div class="cycle-slideshow" data-cycle-slides=".slide">

幻灯片放映的文本动画使用cycle2的“cycle-after”

1 个答案: