我正在使用cycle jquery作为我的网站的幻灯片。这是我的html代码。
<div class="slideshow_item">
<div class="image"><a href="#"><img src="#"/></a></div>
<div class="data">
<h4><a href="#">title1</h4>
<p>content</p>
</div>
</div>
下面是我的javascript代码
<script>
$(function() {
// ---------------------------------------------------
// Slideshow 1
$('#slideshow_1').cycle({
fx: 'scrollHorz',
easing: 'easeInOutCirc',
speed: 700,
timeout: 5000,
pager: '.ss1_wrapper .slideshow_paging',
prev: '.ss1_wrapper .slideshow_prev',
next: '.ss1_wrapper .slideshow_next',
before: function(currSlideElement, nextSlideElement) {
var data = $('.data', $(nextSlideElement)).html();
$('.ss1_wrapper .slideshow_box .data').fadeOut(1200, function(){
$('.ss1_wrapper .slideshow_box .data').remove();
$('<div class="data">'+data+'</div>').hide().appendTo('.ss1_wrapper .slideshow_box').fadeIn(1200);
});
}
});
// not using the 'pause' option. instead make the slideshow pause when the mouse is over the whole wrapper
$('.ss1_wrapper').mouseenter(function(){
$('#slideshow_1').cycle('pause');
}).mouseleave(function(){
$('#slideshow_1').cycle('resume');
});
// ---------------------------------------------------
$('a[href="#"]').click(function(event){
event.preventDefault(); // for this demo disable all links that point to "#"
});
});
</script>
在.data下的html代码中,我有h4和p标记。滑块与水平滑块和在滑块上流动的标题(.data)配合得很好,因为位置在.data中是绝对的,而且效果很好。现在,我的问题是,如何通过更改上面的javascript来从上到下,或者从左到右动态地弹出我的标题(.data)。请帮帮我。
我想你可以调用effect()方法来获得你想要的结果。可以将4个选项设置为"反弹"效果:
方向:效果的方向。可以是"上"、"下"、"左"、"右"。默认值为"向上"
距离:反弹的距离。默认值为20
模式:效果的模式。可以是"显示"、"隐藏"或"效果"。默认为"效果"
反弹次数:反弹次数。默认值为5。
选择什么方向、距离和时间取决于你,但对我们来说最重要的是模式。我们将模式设置为"隐藏",而不是隐藏元素的fadeOut,也不是显示元素的fade In,而是设置为"显示"。
以下是方法的样子:
.effect("bounce", {mode: "hide", times: 4, direction: "up"}, 1200, function(){});
正如您所看到的,首先,我们选择了"反弹"效果,然后使用一些可用选项的数组,然后使用持续时间(在您的情况下为1200或1.2秒),最后一个是在效果结束后运行的函数。
下面是jFiddle的一个快速示例,说明反弹如何在"显示"one_answers"隐藏"模式下工作:http://jsfiddle.net/Z73P5/2/
所以,试着用这个来更改循环插件的"before"参数。希望它能起作用。
before: function(currSlideElement, nextSlideElement) {
var data = $('.data', $(nextSlideElement)).html();
$('.ss1_wrapper .slideshow_box .data').effect("bounce", {times: 4, direction: "up", mode: "hide"}, 1200, function(){
$('.ss1_wrapper .slideshow_box .data').remove();
$('<div class="data">'+data+'</div>').hide().appendTo('.ss1_wrapper .slideshow_box').effect("bounce", {times: 4, direction: "down", mode: "show"}, 1200);
});
}