09.04.2011, 22:40
|
|||
|
|||
Picture Show - Schön und Gut aber wie
Hi Leute
Ich sehe auf vielen Seiten eine Slideshow... Möcht ich Jetzt auch, aber wie? Ich möchte keine großartige Show mit Flummi-Effekten oder ähnlichem, sondern einfach ein Bild weches nach 5sec durch ein anderes ersetzt wird usw... Für 3 bilder. Vieleicht sollten die Bilder aber nicht einfach ausgewechselt werden, sondern übergeblendet werden, also "flüssig" wechseln. Danke schon mal im Voraus 
|
| Sponsored Links |
|
09.04.2011, 23:16
|
||||
|
||||
|
Mit einer Prise "Google" hättest du das auch selbst gefunden...
 20 Best jQuery Slideshow / Photo Gallery Plugins Nr. 10 passt meiner Meinung nach mit kleineren Anpassungen ziemlich gut zu deinen Anforderungen.
__________________
Gruß Roman // ngkreativ.de - Webdesign & Motorradumbau
|
| Sponsored Links |
|
11.04.2011, 17:59
|
|||
|
|||
|
Ok danke habe jetzt einen Code gefunden!
 Jetzt wechseln die Bilder alle 3,5 sec finde ich ok (hab ich ja auch so eingestellt ) ABER nach dem 4ten Bild fängt die Slideshow nicht von vorne an sondern bleibt stehen...hier ist der Code: Code:
<html>
<head>
<script type="text/javascript">
function fade(step) {
var imgs = document.getElementById("meinFader").getElementsByTagName("img");
step = step || 2;
imgs[counter].style.opacity = step/100;
imgs[counter].style.filter = "alpha(opacity=" + step + ")";
step = step + 2;
if (step <= 100) {
window.setTimeout(function () { fade(step); }, 10);
} else {
window.setTimeout(next, 3500);
}
}
function next() {
var imgs = document.getElementById("meinFader").getElementsByTagName("img");
if (typeof(counter) != "number") {
counter = 0;
}
counter++;
if (counter < imgs.length) {
fade();
}
};
</script>
<style type="text/css">
.next { position: absolute; top: 0; left: 0; opacity: 0; filter:alpha(opacity=0); }
#meinFader { position: relative; }
</style>
</head>
<body onload="next()">
<p id="meinFader">
<img src="img/slideshow/1.png" alt="" class="next" />
<img src="img/slideshow/2.png" alt="" class="next" />
<img src="img/slideshow/3.png" alt="" class="next" />
<img src="img/slideshow/4.png" alt="" class="next" />
</p>
</body>
</html>
|
|
14.04.2011, 16:43
|
||||
|
||||
|
Warum nimmst Du nicht einfach das jQuery Plugin?
Zu deinem Code: Wenn dein Counter die Anzahl der Bilder übersteigt, dann sollte er wieder auf Null gesetzt werden. Zitat:
|
|
14.04.2011, 17:14
|
||||
|
||||
|
Jo, sowas hatte ich bei einem meiner Projekte eingesetzt (Maus über Slideshow bewegen) - wird aber leider nicht mehr weiterentwickelt, funktioniert allerdings ganz gut.
__________________
Gruß Roman // ngkreativ.de - Webdesign & Motorradumbau
|
|
14.04.2011, 20:12
|
||||
|
||||
|
Vor kurzem mal entdeckt: Slider Kit, sliding contents with jQuery
Ist so eine Art "Universal" Plugin für alle möglichen Slide Funktionen. Manfred
|
 |
| Stichwörter |
| picture show, slideshow |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Gut lesbare Telefonnummer | AndreasB | Barrierefreiheit | 36 | 30.07.2011 01:03 |
| picture of the day | Mr.T | Javascript & Ajax | 6 | 24.01.2008 01:32 |
| MySQL/PHP: SHOW TABLE STATUS auswerten | RitterRunkel | Serveradministration und serverseitige Scripte | 2 | 15.05.2005 15:51 |
| Zeilenumbruch bei horizontal nebeneinanderliegenden divs | GrafZahl | Knowledge Base | 10 | 16.07.2004 16:13 |
Linear-Darstellung
