如何在simpleSli.de上进行自动幻灯片放映
我已经从http://www.simplesli.de创建了一个simpleSli.de，但我无法弄清楚如何将其用于自动滑动。 任何帮助将不胜感激。
他们的网站说我必须这样做
// Add this javascript, and ensure it appears after the simpleSlide() call $('.auto-slider').each( function() { var related_group = $(this).attr('rel'); window.setInterval("simpleSlideAction('.right-button', " + related_group + ");", 4000); }); 但我已经尝试过，它不适合我。 我想也许我做错了。 如果有人想看到整个事情，这里是所有的jquery插件。 这是我有幻灯片设置的地方http://leodruker.theorydesign.ca/about/
function simpleSlide(incoming_options) { jQuery(function($) { var options = { 'status_width': 20, 'status_color_inside': '#fff', 'status_color_outside': '#aaa', 'set_speed': 1000, 'fullscreen' : 'false', 'swipe': 'true', 'callback': 'function()' }; $.extend(options, incoming_options); $.ss_options = options; $('.simpleSlide-slide').css({ 'opacity': '0' }); $('.simpleSlide-window').prepend('Loading slides...'); var no_of_images = $('.simpleSlide-slide img').size(); if(no_of_images > 0) { var images = new Array(); var i = 0; $('.simpleSlide-slide img').each( function() { images[i] = $(this).attr('src'); i++; }); i = 0; $(images).each( function(){ var imageObj = new Image(); imageObj.src = images[i]; if((imageObj).complete){ no_of_images--; i++; if(no_of_images == 0) { ssInit(); }; } else { $(imageObj).load( function() { no_of_images--; i++; if(no_of_images == 0){ ssInit(); }; }); }; }); } else { ssInit(); }; }); }; function ssInit(){ /* Set the dimensions of each simpleSlide window and tray * based on the size of the first 'slide' inside that window. * Every slide within a given tray/window should be uniform in dimensions. * Also, set Status Window size, if it's being used. Fire callback when finished. */ jQuery(function($) { $('.simpleSlide-window').each( function() { if($.ss_options.fullscreen == 'true'){ $('body').css('overflow', 'hidden'); } var window_contents = $(this).html(); var cleaned_contents = removeWhiteSpace(window_contents); $(this).html(cleaned_contents); var slide_count = $(this).find('.simpleSlide-slide').size(); $(this).find('.simpleSlide-slide').css('display','block'); var window_height = $(this).find('.simpleSlide-slide').first().outerHeight(); if($.ss_options.fullscreen == 'true'){ fullScreen(this); }; $(this).find('.simpleSlide-slide').css({ 'display':'inline', 'float':'left' }); var window_width = $(this).find('.simpleSlide-slide').first().outerWidth(); var window_rel = $(this).attr('rel'); if($.ss_options.fullscreen == 'false'){ $(this).css({ 'height': window_height, 'width': window_width, 'position': 'relative' }); }; $(this).css('overflow','hidden'); setTraySize(this, slide_count, window_width); setSimpleSlideStatus(window_rel, window_height, window_width, slide_count); setPaging(this); $(this).find('#ssLoading').remove(); if($.ss_options.swipe = 'true' && !$.browser.msie){ simpleSwipe(this); }; $(this).find('.simpleSlide-slide').animate({ 'opacity': '1' }, 300, "swing"); }); /* Fire callback after completion of image load and simpleSlide initialization */ if(typeof($.ss_options.callback) == 'function'){ $.ss_options.callback.call(this); }; /* Gives each slide an 'alt' with the slide number */ function setPaging(this_window) { var page_count = 1; $(this_window).find('.simpleSlide-slide').each( function() { $(this).attr('alt', page_count); page_count++; }); }; function fullScreen(this_s_window){ var base_img = new Image(); base_img.src = $(this_s_window).find('img').first().attr('src'); /*var rendered_img = $(this_s_window).find('img').first();*/ var window_prop = $(window).width() / $(window).height(); var image_prop = base_img.width / base_img.height; var wh = $(window).height(); var ww = $(window).width(); if(window_prop > image_prop){ var new_height = (ww / base_img.width) * base_img.height; var height_offset = (new_height - wh) / 2; $(this_s_window).find('img').attr('width', ww).attr('height', new_height).css('marginLeft', 0); $(this_s_window).css({ 'marginLeft': 0, /* Reset to beginning */ 'marginTop':'-' + height_offset + 'px', 'height': wh + height_offset }); $(this_s_window).find('.simpleSlide-slide').css({ 'width': ww, 'height': new_height, 'overflow': 'hidden' }); } else { var new_width = (wh / base_img.height) * base_img.width; var width_offset = (new_width - ww) / 2; $(this_s_window).find('img').attr('height', wh).attr('width', new_width); $(this_s_window).find('img').css({ 'marginLeft': '-' + width_offset + 'px' }); $(this_s_window).find('.simpleSlide-slide').css({ 'width': ww, 'height': wh, 'overflow': 'hidden' }); /* Reset from other orientation */ $(this_s_window).css({ 'marginTop': 0, 'height': wh }); }; $(this_s_window).find('.simpleSlide-tray').css('marginLeft', 0); }; /* Sets size of the "tray" that holds the "slides" */ function setTraySize(slideWindow, count, viewer_width) { var slider_width = count * viewer_width; $(slideWindow).find('.simpleSlide-tray').css({ 'width': slider_width + 'px' }); $(slideWindow).find('.simpleSlide-slide').css('display','inline-block'); }; /* If user chooses to establish Status Window, this function will set * the dimensions of the window based on the desired width. * The window (and its inherent slide's) dimensions are a relative factor * of the main window's size, so the status window will be proportionally * the same as the main window and its tray. */ function setSimpleSlideStatus(this_rel, height, width, image_count) { var ratio = $.ss_options.status_width/width; var status_height = ratio*height; $('.simpleSlideStatus-tray[rel="' + this_rel + '"]') .css({ 'width': $.ss_options.status_width * image_count, 'height': status_height, 'background-color': $.ss_options.status_color_outside }); $('.simpleSlideStatus-window[rel="' + this_rel + '"]') .css({ 'width': $.ss_options.status_width, 'height': status_height, 'background-color': $.ss_options.status_color_inside }); if(jQuery.support.opacity){ $('.simpleSlideStatus-window .simpleSlideStatus-tray[rel="' + this_rel + '"]') .css({ 'opacity': '.5', 'background-color': $.ss_options.status_color_inside }); }; if(!jQuery.support.opacity){ $('.simpleSlideStatus-window .simpleSlideStatus-tray[rel="' + this_rel + '"]').css({ 'filter': 'alpha(opacity=50)', 'background-color': $.ss_options.status_color_inside }); }; }; /* Actuates upon the clicking of a left- or right-button classed element */ $('.left-button, .right-button, .jump-to').live('click', function() { var rel = $(this).attr('rel'); if (!$('div.simpleSlide-tray[rel="' + rel + '"]').is(':animated')) { simpleSlideAction(this, rel); }; }); }); }; function simpleSwipe(this_window) { // Default thresholds & swipe functions var defaults = { threshold: { x: $(this_window).width() * .15, y: $(this_window).height() * .1 }, swipeLeft: function() { simpleSlideAction('.right-button', $(this_window).attr('rel')); }, swipeRight: function() { simpleSlideAction('.left-button', $(this_window).attr('rel')); }, preventDefaultEvents: true }; var options = $.extend(defaults, options); if (!this_window) return false; return $(this_window).each(function() { var me = $(this_window); // Private variables for each element var originalCoord = { x: 0, y: 0 }; var finalCoord = { x: 0, y: 0 }; // Screen touched, store the original coordinate function touchStart(event) { originalCoord.x = event.targetTouches[0].pageX; originalCoord.y = event.targetTouches[0].pageY; }; // Store coordinates as finger is swiping function touchMove(event) { if (defaults.preventDefaultEvents){ event.preventDefault(); }; finalCoord.x = event.targetTouches[0].pageX; // Updated X,Y coordinates finalCoord.y = event.targetTouches[0].pageY; }; // Done Swiping // Swipe should only be on X axis, ignore if swipe on Y axis // Calculate if the swipe was left or right function touchEnd(event) { var changeY = originalCoord.y - finalCoord.y; if(changeY (defaults.threshold.y*-1)) { changeX = originalCoord.x - finalCoord.x; if(changeX > defaults.threshold.x) { defaults.swipeLeft(); }; if(changeX < (defaults.threshold.x*-1)) { defaults.swipeRight(); }; }; }; // Swipe was canceled function touchCancel(event) { console.log('Canceling swipe gesture...'); }; // Add gestures to all swipable areas this_window.addEventListener("touchstart", touchStart, false); this_window.addEventListener("touchmove", touchMove, false); this_window.addEventListener("touchend", touchEnd, false); this_window.addEventListener("touchcancel", touchCancel, false); }); }; function simpleSlideAction(action, rel_no) { jQuery(function($) { var move_speed = $.ss_options.set_speed; var image_count = $('.simpleSlide-window[rel="' + rel_no + '"]').find('.simpleSlide-slide').size(); var window_width = $('.simpleSlide-window[rel="' + rel_no + '"]').innerWidth(); var status_window_width = $('.simpleSlideStatus-window[rel="' + rel_no + '"]').innerWidth(); var status_tray_width = status_window_width * image_count; var current_tray_margin = parseInt($('.simpleSlide-tray[rel="' + rel_no + '"]').css('marginLeft'), 10); var current_status_window_margin = parseInt($('.simpleSlideStatus-tray .simpleSlideStatus-window[rel="' + rel_no + '"]').css('marginLeft'), 10); var current_status_tray_margin = parseInt($('.simpleSlideStatus-window .simpleSlideStatus-tray[rel="' + rel_no + '"]').css('marginLeft'), 10); if($(action).is('.jump-to')) { var to_page = $(action).attr('alt'); var j_margin = (to_page - 1) * (window_width * (-1)); var st_margin = (to_page - 1) * (status_window_width * (-1)); var sw_margin = (to_page - 1) * (status_window_width); move(j_margin, sw_margin, st_margin); }; if($(action).is('.left-button')) { if(current_tray_margin == 0) { var j_margin = current_tray_margin - ((image_count - 1) * window_width); var st_margin = current_status_tray_margin - ((image_count - 1) * status_window_width); var sw_margin = current_status_window_margin + ((image_count - 1) * status_window_width); } else { var j_margin = current_tray_margin + window_width; var st_margin = current_status_tray_margin + status_window_width; var sw_margin = current_status_window_margin - status_window_width; }; move(j_margin, sw_margin, st_margin); }; if($(action).is('.right-button')) { if(current_tray_margin == (image_count - 1) * (window_width * -1)) { var j_margin = 0; var st_margin = 0; var sw_margin = 0; } else { var j_margin = current_tray_margin - window_width; var st_margin = current_status_tray_margin - status_window_width; var sw_margin = current_status_window_margin + status_window_width; }; move(j_margin, sw_margin, st_margin); }; function move(new_margin, new_swindow_margin, new_stray_margin) { $('.simpleSlide-tray[rel="' + rel_no + '"]').animate({ 'marginLeft': new_margin }, move_speed, "swing"); $('.simpleSlideStatus-window .simpleSlideStatus-tray[rel="' + rel_no + '"]') .animate({ 'marginLeft': new_stray_margin }, move_speed, "swing"); $('.simpleSlideStatus-tray .simpleSlideStatus-window[rel="' + rel_no + '"]').animate({ 'marginLeft': new_swindow_margin }, move_speed, "swing"); }; }); }; function removeWhiteSpace(raw) { var cleaned_string = raw.replace(/[\r+\n+\t+]\s\s+/g, ""); return cleaned_string; };
你需要有au右键，所以：
// Add this javascript, and ensure it appears after the simpleSlide() call $('.auto-slider').each( function() { var related_group = $(this).attr('rel'); clearInterval($.autoslide); window.setInterval("simpleSlideAction('.right-button', " + related_group + ");", 4000); });
我弄清楚了。 我把它添加到标题中。