jQuery CSS Slideshow

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Schönen guten Abend. Ich würde gerne auf meiner seite mithilfe von jQuery das Hintergrundbild eines ändern. hat bisher auch ganz gut geklappt. Das einzige was mich stört ist dass (ich kenne mich mit js überhaupt nicht aus) die Hintergrundbilder verblassen. Ich möchte aber dass sie nach rechts verschoben werden.
Hier mal den Code den ich mir aus dem Netz gesucht habe:

$(document).ready(function(){
var imgArr = new Array( // relative paths of images
‚img/news/1.jpg‘,
‚img/news/2.jpg‘
);

var preloadArr = new Array();
var i;

/* preload images */
for(i=0; i < imgArr.length; i++){
preloadArr[i] = new Image();
preloadArr[i].src = imgArr[i];
}
var currImg = 1;
var intID = setInterval(changeImg, 3000);

/* image rotator */
function changeImg(){
$(’#main_part’).animate({opacity: 0}, 1000,function(){
$(this).css(‚background‘,‚url(‘ + preloadArr[currImg++%preloadArr.length].src +’) scroll no-repeat center’);
}).animate({opacity: 1}, 1000);
}
});

#2

Hallo, da hier sowieso jQuery zum Einsatz kommt, würde ich direkt ein fertiges Plugin, wie z.B. das ‚Cycle Plugin‘ benutzen
http://www.malsup.com/jquery/cycle/
Hiermit kann man sehr einfach sehr schöne Übergänge herstellen, ohne sich zu tief in javascript ‚vertiefen zu müssen‘. Bei Fragen einfach noch mal melden.
Viele Grüsse thom23

#3

Erstmal danke für die fixe Antwort.
So wie ich das erkenne arbeitet das Plugin aber nicht mit „background-image“, sondern mit dem tag.
Es müsste aber via „background-image“ laufen.

Zudem möchte ich bei jedem Bildwechsel auch einen anderen Div Container anzeigen lassen.

Ich hab schon öfters nach bestimmten Plugins gesucht, diese aber nicht gefunden. Dabei rum gekommen ist das ich nach stunden Sucherei verzweifelt war und keine lust mehr hatte weiter an der Seite zu basteln.

#4

Sorry, in jQuery bin ich nicht so firm.
Ich arbeite heute vorwiegend mit dem CMS Drupal und da ist schon eine schöne Slideshow dabei.
Gruß, Regina

#5

welche art von methoden willst du die bilder wechseln?

das was du hast, wird der background transparent, wechselt das bild und wird wieder sichtbar.

da ich nicht weiß, welche methode du es machen willst, brauche ich bisschen mehr informationen :wink:

MfG Ruppi

#6

Hallo,

die einzelnen Funktionen von jQuery kann ich leider auch nicht erklären, ich habe mir meistens hier
http://jquery.malsup.com/cycle/
die entsprechenden Code Beispiele angesehen, und das gewünschte verwendet.

#7

Das Cycle Plugin arbeitet nicht nur mit Graphiken. Man kann es die einzelnen Container verschieben lassen, denen man die unterschiedlichen background-images zugewiesen hat.

$(document).ready(function() {
$(’#wrapper’).cycle({
fx: ‚scrollRight‘
});
});

Inhalt 1
Inhalt 2
Inhalt 3

#8

hi,

kann leider im moment nicht weiterhelfen.

cu
harald

#9

Hallo,

eigentlich kenne ich mich nicht mit Javascript bzw. jquery aus.

Jedoch fand ich das:

http://www.blogrammierer.de/jquery-die-20-besten-con…

Dort sind verschiedene Slides mit Demos vorhanden.

Google spuckte das aus:

http://www.impresscms.de/modules/aktuell/singleartic…

Jedoch simple gesagt müsste es so aussehen

.animate ({ right: „0px“, opacity: „1“ }, 1000);

oder ähnlich…

#10

Hallo

Um den gewünschten slide zu erzeugen muss der die Block in dem die opacity geregelt wird, geändert bzw ersetzt werden.
Wie?
http://api.jquery.com/slideToggle/#slideToggle-options

Cu

#11

das wort opacity in deinem code lässt das bild durchsichtig werden. vielleicht hilft dir das:
$(’#1’)
.animate(
{ left: 200 }, {
duration: ‚slow‘,
easing: ‚easeOutBounce‘
})
.animate(
{ left: 0 }, {
duration: ‚slow‘,
easing: ‚easeOutBounce‘
});