mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 09:53 Benutzername: Passwort: Auto-Login

Thema: Bildwechsel jQuery :-) vom 31.07.2012


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Bildwechsel jQuery :-)
Autor Nachricht
JoeMelRamos
Threadersteller

Dabei seit: 11.02.2012
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 31.07.2012 22:55
Titel

Bildwechsel jQuery :-)

Antworten mit Zitat Zum Seitenanfang

Hey Leute!

Folgendes Problem:

Ich habe eine hp erstellt. Das Hintergrundbild besteht aus mehreren Bildern.

Diese wechseln automatisch in jQuery. Meine Frage: Beim Übergang von dem einen zum anderen Bild

kommt eine weiße Fläche. Kann ich die Übergange nicht so einstellen, dass direkt das andere Bild kommt, ohne
einen weißen Hintergrund ?

MfG .... danke im Voraus *zwinker* *hehe*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
JoeMelRamos
Threadersteller

Dabei seit: 11.02.2012
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 31.07.2012 22:56
Titel

Re: Bildwechsel jQuery :-)

Antworten mit Zitat Zum Seitenanfang

Quelltext ^^


html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Portfolio</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.7.1.min.js">
</script>
<script type="text/javascript" src="jQuery.js">
</script>
</head>


<body>

<div id="normal">
</div>

<div id="bw-scaling-background">
<div id="hnt-bild">
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<img src="kaffee.jpg" class="is-showing" />
<img src="neu.jpg" />
<img src="puppe.jpg" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>


css



* { margin: 0; padding: 0; }

#bild2{z-index:0;}
html, body, #bw-scaling-background, #bw-scaling-background table, #bw-scaling-background td { height:100%; width:100%; overflow:hidden; }
#bw-scaling-background { z-index: 1;}
#bw-scaling-background div { height:200%; left:-50%; position:absolute; top:-50%; width:200%; }
#bw-scaling-background td { text-align:center; vertical-align:middle; }
#bw-scaling-background img { margin:0 auto; min-height:50%; min-width:50%; }

#normal{ position:absolute; top:0; left:0; z-index:70; overflow:auto; width:100%; height:100%}


#hnt-bild img{
display:none;}

#hnt .is-showing{display:inline;}


jquery

$(function(){
$(document).ready(function() {
$('a[href*=#]').bind("click", function(event) {
event.preventDefault();
var ziel = $(this).attr("href");

$('html,#normal').animate({
scrollTop: $(ziel).offset().top
}, 2000 , function (){location.hash = ziel;});
});
return false;
});

$(document).ready(function(){
slideShow();
});

function slideShow() {

var showing = $("td .is-showing");
var next = showing.next().length ? showing.next() : showing.parent().children(':first');

showing.fadeOut(200, function() { next.fadeIn(800).addClass('is-showing'); }).removeClass('is-showing');

setTimeout(slideShow, 7000);
}


});
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
pantonine

Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
Verfasst Mi 01.08.2012 00:02
Titel

Antworten mit Zitat Zum Seitenanfang

Du fadest aus und fadest dann ein. Ist doch logisch dass in der Mitte kurzzeitig nichts zu sehen ist. Sonst musst Du eben überblenden.
  View user's profile Private Nachricht senden
immerIch

Dabei seit: 19.10.2010
Ort: #mein{display:block}
Alter: 35
Geschlecht: Männlich
Verfasst Mi 01.08.2012 09:08
Titel

Antworten mit Zitat Zum Seitenanfang

Erstmal:

$(function(){
$(document).ready(function() {

ist doppelt gemoppelt, es bewirkt exakt das gleiche.

$(function(){
ist die Kurzform von
$(document).ready(function() {

Also eins davon raus, unten übrigens gleich.

Eine Doc-Ready-Function reicht.


2. Genau das was pantoine bereits erwähnt hat. du musst zunächst das nächste Bild quasi hinter dem vorderen Bild einblenden, damit irgendwas bei Fadeout des ersten zu sehen ist. (müssten dann eben quasi mit position:absolute und entsprechendem z-index übereinanderliegen).
Code:

next.fadeIn(800,function(){showing.fadeOut(200).removeClass('is-showing'); }).addClass('is-showing');

Ungefähr so, ungetestet.


Zuletzt bearbeitet von immerIch am Mi 01.08.2012 09:09, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
JoeMelRamos
Threadersteller

Dabei seit: 11.02.2012
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst So 05.08.2012 13:14
Titel

Antworten mit Zitat Zum Seitenanfang

verstehe ich nicht wirklich um ehrlich zu sein :/
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Alex

Dabei seit: 28.11.2005
Ort: Dortmund
Alter: 37
Geschlecht: Männlich
Verfasst So 05.08.2012 17:04
Titel

Antworten mit Zitat Zum Seitenanfang

Dann lern bitte erst mal die Grundlagen...
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
JoeMelRamos
Threadersteller

Dabei seit: 11.02.2012
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst So 05.08.2012 17:06
Titel

Antworten mit Zitat Zum Seitenanfang

ich meine jetzt das mit dem z-index....muss ich bei den Bilder dann noch divs hinzufügen oder
class , damit ich das in css definieren kann ?


ich muss das irgendwie hinkriegen ! Lächel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen jquery - hide content in jquery object
jQuery Plugin - Slider als Input wie in jQuery UI
Bildwechsel mit PHP
Bildwechsel
Bildwechsel mit JavaScript
Bildwechsel mit Javascript
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.