我有一个基本的旋转木马,到目前为止有三张图片。它可以很好地平滑地旋转图像,直到我点击从当前图像跳到下一个或上一个图像的链接。
点击后,它会转到所选图像,然后似乎加速了旋转木马?
这是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>