我有一个jquery图像滑块，但它只显示2张幻灯片，所以我真的无法添加更多图像，而不是那些2张幻灯片中有什么方法我可以在这里创建更多幻灯片代码
/* 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 );
}
答案 0 :(得分：0)
total_slideshow_images = $('#slideshow-thumbs li').length;
var next = cycle(rel, current_slide, total_slideshow_images) - 1;
这些行意味着代码会调整您使用该特定类的图像。您似乎只需复制粘贴一个现有图像并更改源链接。
答案 1 :(得分：0)
问题在于（shiny-slider.js）：
left_coord = Math.abs(parseInt(left_coord.replace('px', '')));
脚本使用滑块框架左坐标的绝对值来计算下一个位置。因此，第一张右侧幻灯片将其转到49 - 811 = -762，但是下一张幻灯片使用762而不是-762，导致762 - 811 = -49，这是错误的方向。
如果您移除Math.abs()，滑块将继续向右滑动。然而，该脚本还存在一些其他问题，因为它将继续滑过最后一个图像，以及一些边缘问题等。希望这可以帮助您入门。