0

我正在使用循环 jquery作为我网站的滑块

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

我的jQuery代码是：

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

我的问题是如何将标题和内容文本添加到过渡效果。我的意思是动画效果。这样我的滑块在动画效果上看起来有些不错。请帮我。

4

0 回答 0