如何在simpleSli.de上进行自动幻灯片放映 [英] how to do auto slideshow on simpleSli.de
本文介绍了如何在simpleSli.de上进行自动幻灯片放映的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经从 http://www.simplesli.de 创建了simpleSli.de，但我无法确定了解如何使其自动滑动.任何帮助将不胜感激.
I have created a simpleSli.de from http://www.simplesli.de but I cant figure out how to get it to autoslide. Any help would be greatly appreciated.
他们的网站说我只需要这样做
They website says that I just have to do this
<div class="auto-slider" rel="group"></div>
// 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/
But i have tried that and its not working for me. I think maybe I am doing it wrong. Here is all of the jquery plugin if someone wants to see the whole thing. Here is where I have the slideshow setup 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('<span id="ssLoading" style="color: #808080;font-family:Helvetica, Arial, sans-serif;font-size: 12px; margin: 10px 0 0 10px;display: block">Loading slides...</span>');
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 && 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右键，所以:
You need to have au right-button, so :
<div class="right-button" rel="1"></div>
<div class="auto-slider" rel="1"></div>
// 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);
});
这篇关于如何在simpleSli.de上进行自动幻灯片放映的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
