0
我有一個jQuery的圖像滑塊，但只顯示2張幻燈片，所以我不能真正增加超過圖像什麼在那些2張幻燈片有什麼辦法，我可以在這裏創建更多幻燈片是代碼jQuery的圖像滑塊
/* Slideshow
*/
$(document).ready(function() {
slideshow_loading = true;
slideshow_busy = true;
current_slide = 1;
slideshow_loop_interval = 0;
total_slideshow_images = $('#slideshow-thumbs li').length;
add_action('slideshow_after_preload', slideshow_ready);
slideshow_init();
slideshow_clicks();
slideshow_preload();
});
function slideshow_init() {
clicked_by_loop = false;
// Resize Slideshow Wrapper
$('#slideshow .wrap').height(610);
// Add current slide reflection
$('#current-slide').reflect({
height: 150,
opacity: 0.4
});
$('#slideshow').css('marginBottom', '-150px');
// Separate chunks of thumbnails
$('#slideshow-thumbs li').each(function(i) {
var c = i+1;
if (c % 6 == 0) {
$(this).css('marginRight', '50px');
}
});
// Slideshow thumbs reflection
$('#slideshow-thumbs li img').reflect({
height: 24,
opacity: 0.3
});
// Slideshow video frame reflection
$('#slideshow .wrap #slideshow-video-reflection img').reflect({
height: 60,
opacity: 0.3
});
// Add rel=index to slideshow thumbs
$('#slideshow-thumbs li a').each(function(i) {
$(this).attr('rel', i);
});
// Configure Slideshow Mode
slideshow_transition_init();
// Configure hover & clickevent for #slideshow-video (only image, excluding the map)
if (slideshow_add_permalink) {
$('#slideshow-video, #current-slide')
.hover(function() { $(this).css('cursor', 'pointer'); }, function() { $(this).css('cursor', 'default'); })
.click(function() {
var href = $('#slideshow-meta .meta-name').attr('href');
window.location = href;
});
}
// Slideshow Keyboard Shortcuts
$(document).keyup(function(e) {
//alert(e.keyCode);
switch (e.keyCode) {
case 39: // Right Key
if (slideshow_busy) { return false; }
if (NOT_IE) {
$('#slideshow-right a').stop().animate({opacity: 1}, slideshow_transition_delay*0.5).animate({opacity: 0}, slideshow_transition_delay*0.5);
} else {
$('#slideshow-right a').css('visibility', 'visible');
setTimeout(function() { $('#slideshow-right a').css('visibility', 'hidden'); }, slideshow_transition_delay*0.5);
}
$('#slideshow-right a').click();
break;
case 37: // Left Arrow
if (slideshow_busy) { return false; }
if (NOT_IE) {
$('#slideshow-left a').stop().animate({opacity: 1}, slideshow_transition_delay*0.5).animate({opacity: 0}, slideshow_transition_delay*0.5);
} else {
$('#slideshow-left a').css('visibility', 'visible');
setTimeout(function() { $('#slideshow-left a').css('visibility', 'hidden'); }, slideshow_transition_delay*0.5);
}
$('#slideshow-left a').click();
break;
}
});
// If Slideshow has no posts, remove loading indicator
if (slideshow_images.length > 0) {
$('#slideshow-thumbs-container span.loading').css('visibility', 'visible');
}
}
function slideshow_clicks() {
// Thumbnail controls Click Event
slideshow_thumbs_easing = 'easeOutSine';
slideshow_thumbs_scroll_time = 700;
$('#slideshow-thumb-left, #slideshow-thumb-right').click(function() {
/* Exit event if Slideshow is loading, or Slideshow UI is busy, or No Images in Slideshow */
if (slideshow_loading || slideshow_busy || total_slideshow_images == 0) {return false;}
slideshow_busy = true; /* Lock slideshow interface */
var where = $(this).attr('rel');
var left_coord = $('#slideshow-thumbs').css('left');
left_coord = Math.abs(parseInt(left_coord.replace('px', '')));
var x = 811; // Total offset distance between spans
switch (where) {
case 'left':
if (left_coord == 49) {
// Left limit reached
var t1 = 100;
var t2 = 80;
$('#slideshow-thumbs').stop().animate({left: '63px'}, t1).animate({left: '49px'}, t2);
setTimeout(function() {
slideshow_busy = false;
}, t1+t2+50); // Add 50 miliseconds offset, to prevent bad behavior on rapid clicks
return false;
} else {
// Scroll left
var next_coord = x - left_coord;
var t = slideshow_thumbs_scroll_time;
$('#slideshow-thumbs').stop().animate({left: next_coord + 'px'}, t, slideshow_thumbs_easing);
setTimeout(function() {
slideshow_busy = false;
}, t);
return false;
}
break;
case 'right':
var next_coord = left_coord - x;
var right_limit = Math.abs((Math.floor((total_slideshow_images - 1)/6) * x) - 49);
if (left_coord < right_limit) {
// Scroll right
var t = slideshow_thumbs_scroll_time;
$('#slideshow-thumbs').stop().animate({left: next_coord + 'px'}, t, slideshow_thumbs_easing);
setTimeout(function() {
slideshow_busy = false;
}, t);
return false;
} else {
// Right limit reached
var t1 = 100;
var t2 = 80;
if (total_slideshow_images > 6) {
$('#slideshow-thumbs').stop().animate({left: '-' + left_coord - 14 + 'px'}, t1).animate({left: '-' + left_coord + 'px'}, t2);
} else {
$('#slideshow-thumbs').stop().animate({left: '35px'}, t1).animate({left: '49px'}, t2);
}
setTimeout(function() {
slideshow_busy = false;
}, t1+t2+50); // Add 50 miliseconds offset, to prevent bad behavior on rapid clicks
return false;
}
break;
}
});
// Thumbnails Click Event
$('#slideshow-thumbs li a').click(function(evt) {
/* Exit event if Slideshow is loading, or Slideshow UI is busy, or No Images in Slideshow */
if (slideshow_loading || slideshow_busy || total_slideshow_images == 0) {return false;}
slideshow_busy = true;
if (evt.which == 1) {
/* evt.which is 1 when clicked, undefined when triggered by click();
* http://api.jquery.com/category/events/event-object/ */
clearInterval(slideshow_loop_interval);
}
var rel = parseInt($(this).attr('rel'));
var next = rel;
if (current_slide == (rel + 1)) { slideshow_busy = false; return false;} // Exit event if it's the same slide
current_slide = rel + 1;
slideshow_fade_transition(next, evt);
return false;
});
}
function slideshow_preload() {
var counter = 0;
var total_images = slideshow_images.length;
do_action('slideshow_before_preload');
$.cacheImage(slideshow_images, {
load : function(e) {counter += 1;},
error : function(e) {total_images -= 1;},
complete : function(e) {
if (counter == total_images) {
//setTimeout(function() {
slideshow_loading = false;
do_action('slideshow_after_preload');
//},2000);
}
}
});
}
function slideshow_ready() {
var t = 500;
$('#slideshow-thumbs-container span.loading').fadeOut(t);
setTimeout(function() {
$('#slideshow-thumbs').stop().animate({left: '49px'}, t+100, 'easeOutExpo');
// Enable slideshow video frame
if (total_slideshow_images > 0) {
var video = slideshow_meta[0]['video'];
if (video != '') {
$('#slideshow-video-trigger, #slideshow map area').attr('href', video);
if (NOT_IE) {
$('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').fadeIn(t+100);
} else {
$('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').show();
}
}
}
setTimeout(function() {
slideshow_busy = false; // Unlock the Slideshow UI
slideshow_loop();
}, t+120);
}, t+20);
}
function slideshow_thumbs_autoscroll(next, rel) {
/* Do nothing if nothign to scroll */
if (total_slideshow_images <= 6) { return false; }
switch(rel) {
case 1:
// Slide Right
if (current_slide % 6 == 0 || current_slide == total_slideshow_images) {
if (next != 0) {
// Scroll right
slideshow_busy = false;
$('#slideshow-thumb-right').click();
return false;
} else {
// Go to the beginning
slideshow_busy = true;
$('#slideshow-thumbs').stop().animate({left: '49px'}, slideshow_thumbs_scroll_time, slideshow_thumbs_easing);
setTimeout(function() {
slideshow_busy = false;
}, slideshow_thumbs_scroll_time + 50);
return false;
}
}
break;
case -1:
// Slide Left
if ((current_slide - 1) % 6 == 0) {
if (current_slide == 1) {
// Go to the end
slideshow_busy = true;
var x = 811;
var right_limit = Math.abs((Math.floor((total_slideshow_images - 1)/6) * x) - 49);
$('#slideshow-thumbs').stop().animate({left: '-' + right_limit + 'px'}, slideshow_thumbs_scroll_time, slideshow_thumbs_easing);
setTimeout(function() {
slideshow_busy = false;
}, slideshow_thumbs_scroll_time + 50);
return false;
} else {
// Scroll left
slideshow_busy = false;
$('#slideshow-thumb-left').click();
return false;
}
}
break;
}
}
function slideshow_transition_init() {
$('#slideshow-left a, #slideshow-right a').click(function(evt) {
/* Exit event if Slideshow is loading, or Slideshow UI is busy, or No Images in Slideshow */
if (slideshow_loading || slideshow_busy || total_slideshow_images == 0) {return false;}
slideshow_busy = true;
if (evt.which == 1) {
/* evt.which is 1 when clicked, undefined when triggered by click();
* http://api.jquery.com/category/events/event-object/ */
clearInterval(slideshow_loop_interval);
}
var rel = parseInt($(this).attr('rel'));
var next = cycle(rel, current_slide, total_slideshow_images) - 1;
slideshow_thumbs_autoscroll(next, rel);
current_slide = next + 1;
slideshow_fade_transition(next, evt);
return false;
});
}
function slideshow_fade_transition(next, evt) {
// Add slideshow video (if any)
var video = slideshow_meta[next]['video'];
if (video == '') {
if (NOT_IE) {
$('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').fadeOut(slideshow_transition_delay);
} else {
$('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').hide();
}
} else {
$('#slideshow-video-trigger, #slideshow map area').attr('href', video);
if (NOT_IE) {
$('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').fadeIn(slideshow_transition_delay);
} else {
$('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').show();
}
}
// Configure Transition
var title = $(slideshow_meta[next]['title']);
var category = slideshow_meta[next]['category'];
$('#slideshow .wrap').append('<img alt="" width="960" height="460" class="below" src="' + slideshow_images[next] + '" />');
$('#slideshow .wrap .below').reflect({height: 150, opacity: 0.4});
var t = slideshow_transition_delay;
$('#slideshow .wrap .above').stop().fadeOut(t);
$('#slideshow .wrap .below').stop().fadeIn(t);
$('#slideshow-thumbs li.active').removeClass('active');
$('#slideshow-thumbs li a[rel=' + next + ']').parents('li').addClass('active');
$('#slideshow-meta .meta-name, #slideshow-meta .meta-category').stop().animate({opacity: 0}, t*0.5);
setTimeout(function() {
$('#slideshow-meta .meta-name').html(title.html()).attr('href', title.attr('href'));
$('#slideshow-meta .meta-category').html(category);
$('#slideshow-meta .meta-name, #slideshow-meta .meta-category').stop().animate({opacity: 1}, t*0.5);
}, t*0.3);
setTimeout(function() {
$('#slideshow .wrap .above').remove();
$('#slideshow .wrap .below').removeClass('below').addClass('above');
slideshow_busy = false;
if (slideshow_add_permalink) {
$('#slideshow .wrap .above')
.hover(function() { $(this).css('cursor', 'pointer'); }, function() { $(this).css('cursor', 'default'); })
.click(function() { var href = $('#slideshow-meta .meta-name').attr('href'); window.location = href; });
}
if (evt.which == 1) {
// Reinitiate loop if control buttons clicked
slideshow_loop();
}
}, t+10);
}
function slideshow_loop() {
if (slideshow_loop_enabled == false) { return false; }
slideshow_loop_interval = setInterval(function() {
$('#slideshow-right a').stop().animate({opacity: 1}, slideshow_transition_delay*0.5).animate({opacity: 0}, slideshow_transition_delay*0.5);
$('#slideshow-right a').click();
}, slideshow_loop_time * 1000);
}
這是我的網站http://ninjaparadise.co.cc/， 我所說的滑塊是在頁面頂部的導航欄中的滑塊，您可以看到當您單擊向右箭頭2次它回到第一張幻燈片，我不知道我哪裏錯了。 – Hey 2010-08-06 17:52:22
看到我的其他答案。 – 2010-08-06 20:46:38