基本的なカルーセルがあり、これまでのところ 3 つの画像が含まれています。現在の画像から次または前の画像にスキップするリンクをクリックするまで、画像がスムーズに回転します。
クリックすると、選択した画像に移動し、カルーセルを高速化するように見えますか?
ここにジャバスクリプトがあります
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>