matschomaen
Threadersteller
Dabei seit: 25.05.2004
Ort: -
Alter: 42
Geschlecht:
|
Verfasst Di 29.03.2011 14:03
Titel jQuery slide selber basteln |
|
|
Hallo,
ich bin gerade dabei, für meine Firma eine slideshow mit jQuery zu basteln.
Mit dem slider funktioniert das schon ganz gut.
Leider nicht mit dem Autoplay....
Es scheitert schon an der Deklaration meiner Funktion...
Ich habe bisher eher kleine Sachen mit jQuery umgesetzt.
Nun habe ich eben vor, meine Slideshow mit einem Autoplay zu versehen.
Beim jetzigen Stand versuche ich einfach nur dem gerade aktiven Element eine Klasse anzuhängen...
Nach einer bestimmten Zeit soll dann zum nächsten Element gewechselt werden.
Beim Aufruf wird mir aber angezeigt, dass die Funktion nicht deklariert wurde...
Vielleicht fällt euch hier der Fehler auf?
[code]$(document).ready(function() {
var outer = $("#preview_outer");
var arrow = $("#arrow");
var thumbs = $("#thumbs span");
var thumbs_pic = $("#thumbs span img");
var artLink = $("#preview_inner div a");
var preview_pos;
var preview_els = $("#preview_inner div");
var image_width = preview_els.eq(0).width(); // Get width of imaages
var cssObjNormThumb = {
'filter' : 'alpha(opacity=80)',
'-moz-opacity' : '0.8',
'-khtml-opacity' : '0.8',
'opacity' : '0.8'
}
var cssObjHover = {
'filter' : 'alpha(opacity=100)',
'-moz-opacity' : '1',
'-khtml-opacity' : '1',
'opacity' : '1'
}
var cssObjNormLink = {
'filter' : 'alpha(opacity=80)',
'-moz-opacity' : '0.8',
'-khtml-opacity' : '0.8',
'opacity' : '0.8'
}
thumbs_pic.css(cssObjNormThumb);
artLink.css(cssObjNormLink);
function slideSwitch() {
var $active = $('#preview_inner div IMG.active');
var $next = $active.next();
$next.addClass('active');
$active.removeClass('active');
};
thumbs.click(function() {
preview_pos = preview_els.eq( thumbs.index( this) ).position();
outer.stop().animate( {'scrollLeft' : preview_pos.left}, 500 );
arrow.stop().animate( {'left' : $(this).position().left }, 500 );
});
$(function() {
setInterval( "slideSwitch", 5000 );
});
thumbs_pic.hover(function () {
$(this).animate(cssObjHover, 300);
}, function () {
$(this).animate(cssObjNormThumb, 500);
});
artLink.hover(function () {
$(this).animate(cssObjHover, 300);
}, function () {
//if($(this).hasClass("thumb-active")) {
$(this).animate(cssObjNormLink, 500);
//}
});
// Reset positions on load
arrow.css( {'left' : thumbs.eq(0).position().left } ).show();
outer.animate( {'scrollLeft' : 0}, 0 );
// Set initial width
$("#preview_inner").css('width', preview_els.length * image_width);
});[quote]
Was meint ihr? Was mach ich da falsch?
VG, matschomaen
|
|