keine-ahnung-haber
Mitglied
Servus,
ich wollte mal besonders kreativ sein und eine Slideshow programmieren, die das Bild in mehreren Teilen (die immer leicht versetzt laden) läd und nach vorgegebener Zeit wechselt.
Ich war schon soweit, dass das die Bildteile auf Knopfdruck immer richtig wechseln. Will ich die Funktion, die dies veranlasst aber per setInterval alle 5 sek laden, macht er nüscht mehr.
Jemand ne Idee worans liegen könnte? Firebug erzählt mir übrigens in der Konsole es läge daran, dass die Funktion slider() nicht definiert sein - ist sie aber nachweislich..
Hier mein JS (natürlich mit jquery vorher):
das html dazu könnte dann so aussehen:
Konstruktive Kritik is immer willkommen!
ich wollte mal besonders kreativ sein und eine Slideshow programmieren, die das Bild in mehreren Teilen (die immer leicht versetzt laden) läd und nach vorgegebener Zeit wechselt.
Ich war schon soweit, dass das die Bildteile auf Knopfdruck immer richtig wechseln. Will ich die Funktion, die dies veranlasst aber per setInterval alle 5 sek laden, macht er nüscht mehr.
Jemand ne Idee worans liegen könnte? Firebug erzählt mir übrigens in der Konsole es läge daran, dass die Funktion slider() nicht definiert sein - ist sie aber nachweislich..
Hier mein JS (natürlich mit jquery vorher):
Code:
$(document).ready(function() {
function slider ( )
{
var divs = $("div#slider div:first img").length;
var intTime = 0;
$('#slider div').each(function(i){
var _this = this;
var imgs = $(_this).find("img").length;
if($(_this).hasClass("start"))
{
window.setTimeout(function(){$(_this).find("img:first").fadeIn('100');}, intTime);
$(_this).removeClass("start");
}
else if($(_this).find("img:visible").next()[0] && $(_this).find("img:visible").next()[0].tagName == "IMG")
{
window.setTimeout(function(){$(_this).find("img:visible").addClass("vis").hide();}, intTime);
window.setTimeout(function(){$(_this).find("img.vis").next().fadeIn('100');}, intTime);
window.setTimeout(function(){$(_this).find("img.vis").removeClass("vis");}, intTime);
}
else
{
window.setTimeout(function(){$(_this).find("img:visible").hide();}, intTime);
window.setTimeout(function(){$(_this).find("img:first").fadeIn('100');}, intTime);
}
intTime += 300;
});
}
$("#slider div img").hide();
$("input.button").click(function() { setInterval("slider();", 5000) });
});das html dazu könnte dann so aussehen:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Gallerie</title>
<style type="text/css">
#slider div { height: 200px; width: 200px; margin:10px auto; padding:15px; overflow:hidden; background:#eee; border:1px solid #ccc; }
#slider div img { height: 200px; width: 200px; padding: 0; border: 0; }
</style>
<!-- das ganze Javascript wäre dann hier-->
</head>
<body>
<input type="button" class="button" value="los!">
<div id="slider">
<div class="start">
<img src="./img/frau1.jpg">
<img src="./img/mann1.jpg">
</div>
<div class="start">
<img src="./img/frau2.jpg">
<img src="./img/mann2.jpg">
</div>
<div class="start">
<img src="./img/frau3.jpg">
<img src="./img/mann3.jpg">
</div>
</div>
</body>
</html>Konstruktive Kritik is immer willkommen!
