Hi!
habe aus dem Internet diese Slideshow gefunden: http://davidwalsh.name/mootools-slideshow
Habe die html, css und javascript teil genau so kopiert. Sehe immer nur ein Bild und die Slideshow startet nicht.
Wo liegt das Problem?
habe aus dem Internet diese Slideshow gefunden: http://davidwalsh.name/mootools-slideshow
Habe die html, css und javascript teil genau so kopiert. Sehe immer nur ein Bild und die Slideshow startet nicht.
HTML:
<div id="slideshow-container">
<img src="http://www.tutorials.de/images/slide1.jpg" width="500" height="260" />
<img src="http://www.tutorials.de/images/slide2.jpg" width="500" height="260" />
<img src="http://www.tutorials.de/images/slide3.jpg" width="500" height="260" />
<img src="http://www.tutorials.de/images/slide4.jpg" width="500" height="260" />
<img src="http://www.tutorials.de/images/slide5.jpg" width="500" height="260" />
</div>
CSS:
<style>
#slideshow-container { width:512px; height:384px; position:relative; }
#slideshow-container img { display:block; position:absolute; top:0; left:0; z-index:1; }
</style>
Javascript:
<script type="text/javascript" src="http://mootools.net/download/get/mootools-1.2.5-core-nc.js"></script>
<script type="text/javascript">
window.addEvent('domready',function() {
/* settings */
var showDuration = 3000;
var container = $('slideshow-container');
var images = container.getElements('img');
var currentIndex = 0;
var interval;
/* opacity and fade */
images.each(function(img,i){
if(i > 0) {
img.set('opacity',0);
}
});
/* worker */
var show = function() {
images[currentIndex].fade('out');
images[currentIndex = currentIndex < images.length - 1 ? currentIndex+1 : 0].fade('in');
alert("show");
};
/* start once the page is finished loading */
window.addEvent('load',function(){
interval = show.periodical(showDuration);
});
});
</script>
Wo liegt das Problem?
Zuletzt bearbeitet von einem Moderator: