[FRAGE] Bild Fader

neuling55 · 04. März 2014

Hallo zusammen,

ich bin gerade dabei ein Bild Fader zu erstellen. Es sollen 6 Bilder übereinander angezeigt werden, die dann gleichzeitig nach einer gewissen Zeit wechseln sollen. Das Wechseln soll in einer Schleife geschehen, also nach dem zweiten Bild soll wieder das erste erscheinen usw.
Derzeit läuft mein Skript weniger stabil (Firefox stürzt öfters ab) und ich würde gerne wissen, wie man es besser macht.

Im Folgenden seht ihr meinen Code mit 6 Bildern, jeweils 3 werden immer angezeigt.

Code:

<html><head>
    <script type="text/javascript">
	
		function start()
		{
			i=0;
			while(i<1000000000){
				window.setTimeout("fade()",5000+i);
				window.setTimeout("defade()",10000+i);
				i=i+10000;
			}			
		}

        function fade(step) {
				var imgs = document.getElementsByTagName("img");

				step = step || 0;
				
				imgs[1].style.opacity = step/100;
				imgs[1].style.filter = "alpha(opacity=" + step + ")"; // IE
				imgs[3].style.opacity = step/100;
				imgs[3].style.filter = "alpha(opacity=" + step + ")"; // IE
				imgs[5].style.opacity = step/100;
				imgs[5].style.filter = "alpha(opacity=" + step + ")"; // IE	
				step = step + 2;

				if (step <= 100) {
					window.setTimeout(function () { fade(step); }, 20);
				}
        }
		function defade(step) {
				var imgs = document.getElementsByTagName("img");

				step = step || 0;
				
				imgs[1].style.opacity = 1-(step/100);
				imgs[1].style.filter = "alpha(opacity=" + (1-step) + ")"; // IE
				imgs[0].style.opacity = step/100;
				imgs[0].style.filter = "alpha(opacity=" + step + ")"; // IE
				imgs[3].style.opacity = 1-(step/100);
				imgs[3].style.filter = "alpha(opacity=" + (1-step) + ")"; // IE
				imgs[2].style.opacity = step/100;
				imgs[2].style.filter = "alpha(opacity=" + step + ")"; // IE
				imgs[5].style.opacity = 1-(step/100);
				imgs[5].style.filter = "alpha(opacity=" + (1-step) + ")"; // IE
				imgs[4].style.opacity = step/100;
				imgs[4].style.filter = "alpha(opacity=" + step + ")"; // IE
				
				step = step + 2;

				if (step <= 100) {
					window.setTimeout(function () { defade(step); }, 20);
				}
        }
		
    </script>
</head><body onload="start()"  >
	<div id="main"  style="border:4px solid #82b825; width:120px; height:600px">
	<p><center><span style="font-family:helvetica; font-size:12;" ><b>Überschrift</p>
    <p style="position:relative;">
        <img src="0.jpg" alt="">
        <img src="1.jpg" alt=""  style="position:absolute; left:0; top:0; opacity:0; filter:alpha(opacity=0)">
	</p>
	<p style="position:relative;">
		<img src="2.jpg" alt="">
        <img src="3.jpg" alt=""  style="position:absolute; left:0; top:0; opacity:0; filter:alpha(opacity=0)">
	</p>
	<p style="position:relative;">
		<img src="4.jpg" alt="">
        <img src="5.jpg" alt=""  style="position:absolute; left:0; top:0; opacity:0; filter:alpha(opacity=0)">
    </p>
	</div>
</body></html>

Gibt es eine bessere, einfachere Lösung? Die Umgebung der Bilder sollte mit HTML gestalterisch bleiben und die Bilder sollen auch verlinkt werden können.

Ich würde mich sehr freuen, wenn mir einer helfen könnte

Viele Grüße
Alex

rico2009 · 04. März 2014

neuling55 schrieb:

Code:

...
    <script type="text/javascript">
		function start()
		{
			i=0;
			while(i<1000000000){
				window.setTimeout("fade()",5000+i);
				window.setTimeout("defade()",10000+i);
				i=i+10000;
			}			
		}
....

Das hier sieht schon mal garnicht so gesund aus... Das der Browser hier ins Stocken gerät, wundert mich nicht.

neuling55 schrieb:
Gibt es eine bessere, einfachere Lösung?

Ja, es gibt viele tolle, schöne Plugins für dafür. z.B. Examples | Responsive jQuery Slider | bxSlider Damit geht es einfacher und schneller und man hat sich die viele Arbeit gespart, sowas _nochmal_ so bauen.

neuling55 · 05. März 2014

Vielen Dank für den Tipp. Ich habe das jetzt mal ausprobiert:

Code:

	<head>

		<!-- jQuery library (served from Google) -->
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<!-- bxSlider Javascript file -->
		<script src="jquery.bxslider.min.js"></script>
		<!-- bxSlider CSS file -->
		<link href="jquery.bxslider.css" rel="stylesheet" />



		<script type="text/javascript">

		$(document).ready(function(){

			$('#slider1').bxSlider({
			  mode: 'horizontal',
			  auto: true,
			  autoControls: false,
			  pause: 4000,
			  controls:false,
			  autoHover: true
			});
			$('#slider2').bxSlider({
			  mode: 'horizontal',
			  auto: true,
			  autoControls: false,
			  pause: 4000,
			  controls:false
			});
			$('#slider3').bxSlider({
			  mode: 'horizontal',
			  auto: true,
			  autoControls: false,
			  pause: 4000,
			  controls:false
			});
			$('#slider4').bxSlider({
			  mode: 'horizontal',
			  auto: true,
			  autoControls: false,
			  pause: 4000,
			  controls:false
			});
		
		});
		

		</script>
	</head>
	<body>
		<div id="main" style="height:600; width:100;"> 
			<h3>Slideshow 2</h3>
			<ul id="slider1">
			  <li><img src="1.jpg" /></li>
			  <li><img src="2.jpg" /></li>
			</ul>
			<ul id="slider2">
			  <li><img src="1.jpg" /></li>
			  <li><img src="2.jpg" /></li>
			</ul>
			<ul id="slider3">
			  <li><img src="1.jpg" /></li>
			  <li><img src="2.jpg" /></li>
			</ul>
			<ul id="slider4">
			  <li><img src="1.jpg" /></li>
			  <li><img src="2.jpg" /></li>
			</ul>
		</div>
	</body>
</html>

Einige Fragen habe ich aber noch. Weißt du wie man die schwarzen Punkte unter den Bildern entfernen kann? Ich habe in der Dokumentation nichts gefunden, aber vielleicht habe ich etwas übersehen.

Gibt es eine bessere Möglichkeit mehrere Bilder vertikal übereinander zu wechseln? Also bei mir brauche ich derzeit pro Bilderpaar einen Slider. So habe ich von diesen schwarzen Punkten insgesamt 8 Stück derzeit (pro Slider 2). Wenn es eine Möglichkeit gäbe, dass man in einen Slider vertikal mehrere Bilder positionieren kann und diese dann gleichzeitig wechseln, wäre ich sehr dankbar.

Viele Grüße
Alex

rico2009 · 05. März 2014

Hi,

neuling55 schrieb:
Weißt du wie man die schwarzen Punkte unter den Bildern entfernen kann? Ich habe in der Dokumentation nichts gefunden, aber vielleicht habe ich etwas übersehen.

Das geht per CSS ganz gut. Du kannst auf das Element "bx-pager" ein display: none legen und die Punkte werden nicht mehr angezeigt.
Nachtrag: Habe gerade noch diese Eigenschaft "pager: false" in der Doku (http://bxslider.com/v3) gefunden. Eventuell tuts das auch schon...

neuling55 schrieb:
Gibt es eine bessere Möglichkeit mehrere Bilder vertikal übereinander zu wechseln? Also bei mir brauche ich derzeit pro Bilderpaar einen Slider. So habe ich von diesen schwarzen Punkten insgesamt 8 Stück derzeit (pro Slider 2). Wenn es eine Möglichkeit gäbe, dass man in einen Slider vertikal mehrere Bilder positionieren kann und diese dann gleichzeitig wechseln, wäre ich sehr dankbar.

Meinst du sowas hier Examples | Responsive jQuery Slider | bxSlider? Ist zwar nicht vertikal, aber vielleicht ist das ja auch schon was für dich.

Gruß

[FRAGE] Bild Fader

neuling55

New member

rico2009

Guest

neuling55

New member

rico2009

Guest