1

我制作了一个带有垂直缩略图的照片库，我如何在缩略图上模拟鼠标悬停和单击事件，以便它像您单击它们一样自动动画..

请在http://misslebanon2010.com/urbana/new/index.php看看我到目前为止所做的画廊

如果您注意到您可以向下和向上滚动，您也可以单击任何缩略图以在中间显示更大的照片和描述，问题是我怎样才能让它自动播放

我已经尝试过 JCarousel 插件，但如果您手动使用它，它的播放方式并没有达到应有的效果

<script type="text/javascript">
$(document).ready(function () {
        //jCarousel Plugin
    $('#thumbs-carousel').jcarousel({
        vertical: true,
        scroll: 1,
        auto: 2,
        wrap: 'last',
        initCallback: mycarousel_initCallback
    });

//Combine jCarousel with Image Display
$('#slideshow-carousel li a').hover(
    function () {

        if (!$(this).has('span').length) {
            $('#slideshow-carousel li a img').stop(true, true).css({'border': '2px #ccc solid'});
            $(this).stop(true, true).children('img').css({'border':'2px orange solid'});
        }       
    },
    function () {

        $('#slideshow-carousel li a img').stop(true, true).css({'border': '2px #ccc solid'});
        $('#slideshow-carousel li a').each(function () {

            if ($(this).has('span').length) $(this).children('img').css({'border':'2px orange solid'});


        });

    }
).click(function () {

    $('span.arrow').remove();  
    $('#frtitle').html($(this).find("img").attr('title'));
    $('#desc').html($(this).find("img").attr('alt'));         
    $(this).append('<span class="arrow"></span>');
    $('#slideshow-main li').removeClass('active');        
    $('#slideshow-main li.' + $(this).attr('rel')).addClass('active');  

    return false;
    });


});
    function mycarousel_initCallback(carousel) {

        // Pause autoscrolling if the user moves with the cursor over the clip.
        carousel.clip.hover(function() {
            carousel.stopAuto();
        }, function() {
            carousel.startAuto();
        });
    }

</script>
4

0 回答 0