Question

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

请查看我迄今为止在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>

垂直缩略图库与自动播放

0 个答案: