Question

我使用EasySlider创建了幻灯片，我添加了悬停/动画功能，以添加能够启动Shadowbox的字幕叠加。

我的问题是最后一张幻灯片似乎使我的标题序列为空。幻灯片处于转换状态时，该函数将运行，但完成后，标题将返回其原始位置。这只发生在序列的最后一张幻灯片上。

任何人都可以告诉我如何更改我的字幕功能或EasySlider以使其工作吗？

http://zachinscho.com/save/kreber_test/V2/

由于

Answer 1

我知道这是一个老帖子，我确信Marlin解决了很多文本功能 - 但是如果有人在寻找添加字幕的解决方案（不涉及更改js）我添加了一个类到css（easyslider screen.css文件）和一个用于定义文本行为的悬停类：

的CSS：

.stext {
display: none; 
position: absolute; 
margin-top: -29px; 
width: 660px; 
left:0px; 
padding: 7px 0px;
}
#slider li:hover .stext {
display: block; 
background: #000000; 
opacity: 0.5; 
filter: alpha(opacity=50); 
padding-left: 10px; 
padding-right: 10px; 
font-family: Trebuchet MS, Arial, sans-serif; 
font-size: 12px; 
color: #eeeeee; 
text-decoration: none;
}

和html（我刚刚将第一张幻灯片作为例子包含在内：

<div id="slider">
    <ul>                
        <li><img src="images/slide-01.jpg" alt="image description" />
         <a href="#"><span class="stext">caption text to show on hover</span></a></li>

Answer 2

扎克，老实说，我找不到你的代码错误，但是如果你取消了各个监听器并为所有幻灯片应用了一个通用的监听器，它就可以解决你的问题

$('#easysliderMain li').hover(function(){
     $(".cover", this).stop().animate({top:'250px'},{queue:false,duration:160});
}, function() {
     $(".cover", this).stop().animate({top:'280px'},{queue:false,duration:160});
});

带有字幕的Jquery EasySlider - 最后一张幻灯片没有动画

2 个答案: