使用「cycle-after」進行循環2的幻燈片放映的文本動畫

我試圖在幻燈片完成轉換到下一張幻燈片後隱藏文字slide或fade in。一個例子是this website上的幻燈片。使用「cycle-after」進行循環2的幻燈片放映的文本動畫

我正在嘗試使用「週期後」事件cycle-2API 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>

來源

2014-07-15 Greg Dobbins

您將要循環一組容器。

<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滑活性類至。沒有額外的jQuery需要什麼。

爲了使循環插件安裝到.slide元素改變你如何創建循環，以表明它應該週期.slide：

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

來源

2014-07-15 19:51:56

嘿本，感謝您的答覆。我在實施您的方法時遇到問題。當我這樣做時，我的幻燈片不再是幻燈片放映，而是圖像顯示塊，一個在另一個之上。我已經在我原來的帖子中發佈了我正在使用的代碼。 –

.slide類需要被絕對定位，top：0，left：0。我調整了我的帖子以反映這一點。 –

再次感謝，本。它很棒！我會爲所有讀過這段代碼的人說，我認爲代碼在我將「過渡」時間更改爲更長時間之前無法使用。在我按照我想要的方式行事之前，我在「4s」和「6s」之間。 –

使用「cycle-after」進行循環2的幻燈片放映的文本動畫

回答

相關問題