HTML Diashow erstellen

[habichtfreak]

hallo,

ich bin langsam am verzweifeln. ich möchte auf meiner hp eine (eigentlich mehrere) diashows erstellen, die aus X bildern besteht, immer läuft, sich immer wiederholt, jedes bild 5s zu sehen ist, die animation (bildwechsel) soll ca. 1s dauern. ich brauche keine steuerelemente, kein text der bei hover erscheint, und auch sonst kein schnickschnack. eigentlich brauch ich nur ne .gif, aber ich wollte es mal mit css probieren.

also hab ich ca. 10 anleitungen durchgeackert um es nachzubauen. das funktioniert, aber dabei entstehen auch immer probleme:

- animation läuft mit beschriebenen 4 bildern wunderbar, aber 3, 5, 7 oder 10 geht eben nicht
- mehrere slideshows auf einer seite funktionieren nicht
- die ersten beiden punkte treffen nicht zu, dafür muss ich aber 1000 keyframes berechnen (ich hab ja sonst nichts zu tun)
- eine variante mit zeitlich versetzter sichtbarkeit (opacity) erzeugt bei 7 bildern dauerhaft 50% cpu last auf einen i5 (haswell). das ist inakzeptabel
- meistens ist der übergang vom letzten zum ersten bild durch ein "weißes bild" getrennt (das will ich so nicht)

mit js hab ich mich nicht weiter beschäftigt, weil ich davon bahnhof verstehe. wenn es damit besser geht als mit css, meinetwegen. muss aber ne copy-paste lösung sein.


mfg hb

 

[Sephe]

CSS Transitions gehen halt auf die CPU. Da bleibt dir nur eine JS-Lösung übrig. Und wenn du nicht basteln willst: Wordpress mit Plugin.

 

[Smartass]

Siehe Fiddle-Codes + Vorschau bzw. Fullscreen Result

 

[mambokurt]

Mal ein paar Codeschnipsel in JS:

function playpic() {
     var current = decodeURIComponent(document.getElementById('fullscreenimage').src);
    for(var x=0; x<aDia.length; x++) {
      if(current.indexOf(aDia[x].substr(1)) != -1) {
        if(!aDia[x+1]) {
         x =-1; 
        }
        document.getElementById('fullscreenimage').src = aDia[x+1];
        return; 
      }
    }
    document.getElementById('fullscreenimage').src = aDia[0];
      window.setTimeout("playpic()", 7000);
  }

aDia ist dann einfach nur ein Javascript Array, dass den Pfad zu deinen Bildern enthält, dargestellt werden die Bilder über ein <img id="fullscreenimage" src=""/> bei dem das src Attribut übers Javascript umgebogen wird. Nachdem playpic ein Bild geladen hat wird mit setTimeout ein Timeout von 7 Sekunden gesetzt, danach lädt playpic das nächste Bild in der Liste.

Wenn das mit mehreren Diashows laufen soll, kann man das entweder objektorientiert bauen oder man macht X Funktionen playpic und lässt die immer auf verschiedene Arrays und Zielbilder laufen.

 

[r15ch13]

oder man macht X Funktionen playpic und lässt die immer auf verschiedene Arrays und Zielbilder laufen.

Ein Parameter fuer die Id in der Funktion waere besser.

function playpic(elementId, images) {
  if(document.getElementById(elementId) == undefined) return;
  if(typeof images == 'undefined' || images.length == 0) return;
 
  var current = decodeURIComponent(document.getElementById(elementId).src);
  for(var x=0; x<images.length; x++) {
    if(current.indexOf(images[x].substr(1)) != -1) {
      if(!images[x+1]) {
        x =-1; 
      }
      document.getElementById(elementId).src = images[x+1];
      return; 
    }
  }
  document.getElementById(elementId).src = images[0];
  window.setTimeout(function() {
    playpic(elementId, images);
  }, 1000);
}

 

[habichtfreak]

danke für eure mühen. mittlerweile bin ich fündig geworden. fragt mich bitte nicht WIE es funktioniert, ich verstehe weiterhin nur bahnhof von js. aber es macht genau was ich will:

   				<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
  				<script type="text/javascript" src="js/jssor.js"></script>
    				<script type="text/javascript" src="js/jssor.slider.js"></script>
				<script>
				       jQuery(document).ready(function ($) {
 				       var options = {
				       $AutoPlay: true,                                   //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
         			       $DragOrientation: 1                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
				       };
				       var jssor_slider2 = new $JssorSlider$("slider2_container", options);
      				       });
   				</script>
				<div id="slider2_container" style="position: relative; top: 0px; left: 0px; width: 982px; height: 672px; padding-bottom: 20px;  ">
  			  	      <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 980px; height: 670px; border: 1px black solid; border-radius: 15px; overflow: hidden;">
   				       	<div><img u="image" src="bilder-picduo/piccolo5-1.png" /></div>
    				       	<div><img u="image" src="bilder-picduo/piccolo5-2.png" /></div>
     				       	<div><img u="image" src="bilder-picduo/piccolo5-3.png" /></div>
     				       	<div><img u="image" src="bilder-picduo/piccolo5-4.png" /></div>
     				       	<div><img u="image" src="bilder-picduo/piccolo5-5.png" /></div>
     				       	<div><img u="image" src="bilder-picduo/piccolo5-6.png" /></div>
     				       	<div><img u="image" src="bilder-picduo/piccolo5-7.png" /></div>
       				      </div>
    				</div>