0

我有一个基本的轮播，到目前为止，里面有三张图片。它可以流畅地旋转图像，直到我单击一个从当前图像跳到下一个或上一个图像的链接。

单击时，它会转到所选图像，然后似乎加快了轮播速度？

这是javascript

carouselDelay: 7000,
carouselFadeDuration: 500,
timeouts: null,
hpCarouselInTransition: false,

    imageCarousel: function() {

    // If we have enough images, run the carousel
    if ($('#ul_block_hpgallery li').length > 1) {
        // start the carousel   
        $('#image_gallery_buttons img').each(function() {
            $(this).click(function() {

                if ($(this).hasClass('selected'))
                    return;

                common.homepageSlidesTransition();

            });
        });

        setTimeout(function() {
            common.homepageSlidesTransition();
        }, common.carouselDelay);
    }

},

homepageSlidesTransition: function(requested) {

    requested = typeof requested !== 'undefined' ? requested : false;

    if (requested === false && common.hpCarouselInTransition === true)
        return;



    var pPrev = $('#ul_block_hpgallery > li.selected');
    var pNext, selectedIndex;


    if (requested === false) {

        if (pPrev.next('li').length)
            pNext = pPrev.next('li');
        else
            pNext = pPrev.siblings('li').first();

    } else {
        common.hpCarouselInTransition = true;
        pNext = $('#ul_block_hpgallery > li').eq(requested);
    }



    selectedIndex = pNext.index();

    pPrev.removeClass('selected').addClass('last-selected');
    $('#image_gallery_buttons > li').removeClass('selected');
    pNext.css({
        opacity: 0
    }).addClass('selected').animate({
        opacity: 1
    }, common.carouselFadeDuration, function() {
        pPrev.removeClass('last-selected');
        $('#image_gallery_buttons > li').eq(selectedIndex).addClass('selected');
        $('#image_title_display').html(pNext.find('img').attr('alt'))
        window.setTimeout(function() {
            common.homepageSlidesTransition();
        }, common.carouselDelay + common.carouselFadeDuration);
    });


},

资源

<div id="hp_gallery">
<div id="add_block_hpgallery" class="add_hpGallery">
<ul id="ul_block_hpgallery">
<li id="ig_image_0" class="hpNav0" style="opacity: 1;">
<img alt="Image 3" src="/assets/add_blocks/1_wall2.jpg">
</li>
<li id="ig_image_1" class="hpNav1" style="opacity: 1;">
<li id="ig_image_2" class="hpNav2 selected" style="opacity: 1;">
</ul>
</div>
<div id="galleryFooter">
<ul id="image_gallery_buttons" class="ulMenu">
<li class="image_gallery_button_holder">
<img id="ig_button_0" class="image_gallery_button ig_button_0" height="19" width="19" alt="" title="" src="/assets/blank.gif">
</li>
<li class="image_gallery_button_holder">
<li class="image_gallery_button_holder selected">
</ul>
<div id="image_title_display">Image 2</div>
</div>
</div>
4

0 回答 0