我为每张幻灯片制作了一个滑块和标题,说明。当幻灯片处于活动状态时,我想使用jquery为字幕设置动画。不知怎的,我设法做到了,但它不像我认为它应该完成;)这里是我做的代码,它的工作原理,但在计时器上,任何人都可以帮助我触发这个?
$(function () {
var $anchors = $('.description');
(function _loop(idx) {
$anchors.removeClass('highlight').eq(idx).addClass('highlight');
setTimeout(function () {
_loop((idx + 1) % $anchors.length);
}, 7000);
$('.description').fadeIn(2000);
}(0));
});
window.setInterval(function () {
if ($('#test2.highlight')) {
$('.description').removeAttr('style');
$('.description').fadeIn(2000);
}
}, 7000); // checks all 800ms
html
<ul class="slides">
<li id="test" class="" style="width: 100%; float: left; margin-right: -100%; position: relative; height: 460px; display: list-item; opacity: 0.42695848571879425;">
<a href="http://tyf">
<span id="test3" class="caption highlight" style="top: 63.088278221567435px;">test2</span>
</a>
<img src="http://hurompolska.pl/wp-content/uploads/2013/11/przepisy_tlo.png" width="100%"> <span id="test2" class="description highlight" style="display: inline; opacity: 0.24278023310924668;">opis2</span> </li>
<li id="test" class="flex-active-slide" style="width: 100%; float: left; margin-right: -100%; position: relative; height: 460px; display: list-item; opacity: 0.5730415142812058;">
<a href="http://bum">
<span id="test3" class="caption" style="top: 63.088278221567435px;">test</span>
</a>
<img src="http://hurompolska.pl/wp-content/uploads/2013/11/top1.jpg" width="100%"> <span id="test2" class="description" style="display: inline; opacity: 0.24278023310924668;">tesfasd</span> </li>
</ul>