Autor |
Nachricht |
JoeMelRamos
Threadersteller
Dabei seit: 11.02.2012
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 31.07.2012 22:55
Titel Bildwechsel jQuery :-) |
|
|
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
|
|
|
|
|
JoeMelRamos
Threadersteller
Dabei seit: 11.02.2012
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 31.07.2012 22:56
Titel Re: Bildwechsel jQuery :-) |
|
|
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);
}
});
|
|
|
|
|
Anzeige
|
|
|
pantonine
Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
|
Verfasst Mi 01.08.2012 00:02
Titel
|
|
|
Du fadest aus und fadest dann ein. Ist doch logisch dass in der Mitte kurzzeitig nichts zu sehen ist. Sonst musst Du eben überblenden.
|
|
|
|
|
immerIch
Dabei seit: 19.10.2010
Ort: #mein{display:block}
Alter: 35
Geschlecht:
|
Verfasst Mi 01.08.2012 09:08
Titel
|
|
|
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
|
|
|
|
|
JoeMelRamos
Threadersteller
Dabei seit: 11.02.2012
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 05.08.2012 13:14
Titel
|
|
|
verstehe ich nicht wirklich um ehrlich zu sein :/
|
|
|
|
|
Alex
Dabei seit: 28.11.2005
Ort: Dortmund
Alter: 37
Geschlecht:
|
Verfasst So 05.08.2012 17:04
Titel
|
|
|
Dann lern bitte erst mal die Grundlagen...
|
|
|
|
|
JoeMelRamos
Threadersteller
Dabei seit: 11.02.2012
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 05.08.2012 17:06
Titel
|
|
|
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 !
|
|
|
|
|
|
|
|
Ä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
|
|