我正在尝试为 Supersized 插件的每张幻灯片添加一个带有信息的 DIV。我正在搜索信息，发现这个Supersized, show a div based on the slide，（我问了一个关于它的新问题，因为它来自去年）。
我想为每张幻灯片添加一些文本，所以这是我的代码：
<head>
....
<script type="text/javascript">
jQuery(function($){
$.supersized({
// Functionality
slideshow : 1, // Slideshow on/off
autoplay : 0, // Slideshow starts playing automatically
start_slide : 1, // Start slide (0 is random)
stop_loop : 0, // Pauses slideshow on last slide
random : 0, // Randomize slide order (Ignores start slide)
slide_interval : 3000, // Length between transitions
transition : 6, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 1000, // Speed of transition
new_window : 1, // Image links open in new window/tab
pause_hover : 1, // Pause slideshow on hover
keyboard_nav : 1, // Keyboard navigation on/off
performance : 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect : 1, // Disables image dragging and right click with Javascript
// Size & Position
min_width : 0, // Min width allowed (in pixels)
min_height : 0, // Min height allowed (in pixels)
vertical_center : 1, // Vertically center background
horizontal_center : 1, // Horizontally center background
fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait : 1, // Portrait images will not exceed browser height
fit_landscape : 0, // Landscape images will not exceed browser width
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
thumb_links : 1, // Individual thumb links for each slide
thumbnail_navigation : 0, // Thumbnail navigation
slides : [ // Slideshow Images
{image : 'img/1.jpg', title : '', thumb : '', url : ''},
{image : 'img/2.jpg', title : '', thumb : '', url : ''},
{image : 'img/3.jpg', title : '', thumb : '', url : ''},
{image : 'img/4.jpg', title : '', thumb : '', url : ''},
{image : 'img/5.jpg', title : '', thumb : '', url : ''}
],
// Theme Options
progress_bar : 1, // Timer for each slide
mouse_scrub : 0
});
});
</script>
</head>
<body>
<div id="txtslide">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
在slideshow/theme/supersized.shutter.js我复制了上面提到的示例
/* After Slide Transition
----------------------------*/
afterAnimation : function(){
if (api.options.progress_bar && !vars.is_paused) theme.progressBar(); // Start progress bar
// current slide is #3
if (vars.current_slide == 3) {
// Get contents of the 'testfield' field
var testfield = api.getField(testfield);
// Set the HTML content of testfielddiv to the value of testfield
if (testfield != "undefined") {
$("#txtslide").html(testfield);
// Show testfielddiv (which was hidden for all other slides)
// The 'fast' argument is for a simple animation; it can be omitted
// to show without animation, or changed to 'slow' or a number in ms
$("#txtslide").show('fast');
}
}
else {
// Hide testfielddiv for any other slide
$("#txtslide").hide('fast');
}
但是这个例子不起作用，也许我做错了什么，希望你能帮助我，在此先感谢。