Bilderwechsel

weave

Dabei seit: 12.06.2014
Beiträge: 4

12.06.2014, 15:09

Hallo,

wir arbeiten momentan an einem Projekt und in der Galerie sollen sich die Bilder abwechseln. Zum testen habe ich mal 6 Bilder eingeladen. Nun ist es so, dass er das erste Bild gar nicht wechselt, das zweite Bild einmal und das dritte Bild zweimal. Dann hört es auf einmal auf. Hat jemand eine Idee woran es liegen könnte? Vielen Lieben Dank schonmal.

Code:

<script language="javascript" type="text/javascript">
var typ = 0;
var bild = 0;
 
window.setTimeout("start()", 5000);
 
function start() {
    change = window.setInterval("bildwechsel()", 100);
}
 
function bildwechsel () {
 
bilder = new Array("Galerie/holzdeko.jpg", "Galerie/holzdeko2.jpg", "Galerie/holzdeko3.jpg", "Galerie/holzdeko4.jpg", "Galerie/holzdeko5.jpg", "Galerie/holzdeko6.jpg");
 
if (typ == 0) {
    document.getElementById("bild" + (bild+1)).src = bilder[bild];
} else {
    document.getElementById("bild" + (bild+1)).src = bilder[(bild + 5)];
}
 
if (bild < 5) {
    bild++;
} else {
    bild = 0;
    if (typ == 0) {
        typ = 1;
    } else if (typ == 1) {
        typ = 0;
    }
    window.clearInterval(change);
   // window.setTimeout("start()", 50000);
}
 
}
</script>
<a href="ÜbersichtBasteln.html"> <img src="Galerie/holzdeko.jpg" width="100" height="100" style="border: 0px;" id="bild1"/></a>
<a href="ÜbersichtBasteln.html"> <img src="Galerie/holzdeko6.jpg" width="100" height="100" style="border: 0px;" id="bild2"/></a>
<a href="ÜbersichtBasteln.html"> <img src="Galerie/holzdeko2.jpg" width="100" height="100" style="border: 0px;" id="bild3"/></a>

Stichworte: -

chiller20000

Dabei seit: 28.09.2013

Beiträge: 544
#2

12.06.2014, 16:03

Du möchtst eine SlideShow haben?!

Da gibt es genug Codes/Frameworks bei Google.
Kommentar

Gast

13.06.2014, 15:10

Zitat von chiller20000 Beitrag anzeigen

Du möchtst eine SlideShow haben?!

Da gibt es genug Codes/Frameworks bei Google.

der TE möchte mE. lernen, anhand einfacher beispiele.
inzwischen würde auch für sowas schon backbone nehmen, aber völlig ohne gehts wohl auch, gesetz dem falle ich hab den TE richtig verstanden.

HTML-Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script language="javascript" type="text/javascript">
var config = 
{
  nodeId: 'container',
  testPicBase :  'http://placehold.it/350x150',
  items : [
    {src: '&text=holz1', alt: 'Galerie/holzdeko.jpg',  link: 'http://php.de'},
    {src: '&text=holz2', alt: 'Galerie/holzdeko2.jpg', link : 'ÜbersichtBasteln.htm'},
    {src: '&text=holz3', alt: 'Galerie/holzdeko3.jpg', link: 'http://php.de'},
    {src: '&text=holz4', alt: 'Galerie/holzdeko4.jpg', link : 'ÜbersichtBasteln.htm' }, 
    {src: '&text=holz5', alt: 'Galerie/holzdeko5.jpg', link : 'ÜbersichtBasteln.htm' }
  ]
}; 

var bildwechsel = function (config) {
  
    var no = 0;
    var node, elm;
     elements = [];
    var self = this;
    
    function draw(elm, no){
       	elm.setAttribute('data-bildwechsel-no', no);
	elm.getElementsByTagName('img')[0].src = config.testPicBase + config.items[no].src;
	elm.getElementsByTagName('a')[0].setAttribute('href',   config.items[no].link);
    }
    
    elements =  document.getElementById(config.nodeId).getElementsByTagName('li');
    var loopArray = Array.prototype.slice.call(elements);
    while(elm = loopArray.shift()){
	if (no == config.items.length) no = 0;
	draw(elm, no);
	no++;
     }
  return {
     change: function(){
	var no = 0;
	var loopArray = Array.prototype.slice.call(elements);
        while(elm = loopArray.shift()){
	  no = elm.getAttribute('data-bildwechsel-no');
	  if (++no == config.items.length) no = 0;
	  draw(elm, no);
	}
     }
   }; 
};  
</script>
</head>
<body>
<ul id='container'>
<li>
<a href=""> <img src="" /></a>
</li>
<li>
<a href=""> <img src=""/></a>
</li>
<li>
<a href=""> <img src=""/></a>
</li>
</ul>
<script language="javascript" type="text/javascript">

  window.onload = function() { 
    var test = new bildwechsel(config);
    window.setInterval(test.change, 200);
  }
</script>
</body>
</html>

Kommentar

weave

Dabei seit: 12.06.2014

Beiträge: 4
#4

14.06.2014, 09:45

Vielen Dank moma!
Du hast mich richtig verstanden, aber leider zeigt er mir wenn ich das test-pic auskommentiere meine Bilder nicht an der Pfad und die Namen dorthin stimmen. (Bei meinem alten Code funktionierte das auch). Da ich vorher nichts mit JavaScript gemacht habe, ist es auch noch schwer mich dorthinein zu denken und herauszulesen wo ich was für mich ändern muss. Es wäre schön wenn noch jemand eine Idee hätte warum meine 'Bilder nicht wollen und wie ich die Bilder anstatt untereinander nebeneinander und in eine bestimmte Größe bekomme.

Vielen Dank schonmal
Kommentar
Gast
#5

14.06.2014, 16:53

hm,
wo hasst du denn deine bildpfade eingetragen?
es müsste bei Dir etwa so aussehen:

Code:

var config = { nodeId: 'container', testPicBase : 'Galerie/', items : [ {src: 'holzdeko.jpg', alt: ''bild1', link: 'http://php.de'}, {src: 'holzdeko2.jpg', alt: 'bild2', link : 'ÜbersichtBasteln.htm'}, {src: 'holzdeko3.jpg', alt: 'usw.', link: 'http://php.de'}, {src: 'holzdeko4.jpg', alt: 'etc. pp', link : 'ÜbersichtBasteln.htm' }, {src: 'holzdeko5.jpg', alt: 'and so on', link : 'ÜbersichtBasteln.htm' } ] };

wie debuggst du javascript? firebug/webconsole/? .
wie checkst du den durch js generierten pfad zum bild?

die bilder nebeneinader?
nimm css:

http://www.css4you.de/display.html

HTML-Code:

<style type="text/css"> ul#container { list-style: none; } ull#container li { display: inline-block; } </style>

oder sowas in der art in die html hauen.

hope this helps.

. Da ich vorher nichts mit JavaScript gemacht habe, ist es auch noch schwer mich dorthinein zu denken und herauszulesen wo ich was für mich ändern muss.

sorry, schicke dir asap. nen link zur kommentierten source per pm.
Kommentar

weave

Dabei seit: 12.06.2014
Beiträge: 4

15.06.2014, 14:37

so ganz klappt das leider immer noch nicht.

zum einen mit dem Bildern nebeneinandern ( Wir arbeiten eigentlich schon mit css dabei) und jetzt wechselt er die Bilder aufmal nicht mehr

Code:

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="Bäume.css">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>Social Wood</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
		
	</head>
	

	<body id="background" >
		
		<div id="Rahmen" align = "right">
		
			<div>
				<div id = "login" > <a href="login.html">  Anmelden  </a> </div>
				<div id = "login" > <a href="neureg.html"> Neu registrieren </a> </div> 
				
				<div align="middle" style="margin-bottom:30px; margin-top:-30px" position="relative" " >
					<img src="Visualisierungsversuch/Baumkrone1.png" alt="Baumkrone" >
				</div>
			</div>	
			
			<div name="Hobby" align="middle">	
				
				<img class="AbstandKlasse" src="Visualisierungsversuch/Icons/Hobby.png" alt="Hobby">	
				
				<div id="rechts">

					<div id="LinkBilder">
						<a href="ÜbersichtBasteln.html"> <img src="Visualisierungsversuch/Bastelanleitungen/BastelnRef.png" alt="Basteln" > 
						<br> Basteln </p>	</a>					
					</div>
					
					<div id="LinkBilder">
						<a href="Holzkiste.html"> <img src="Visualisierungsversuch/Bastelanleitungen/HolzkisteRef.png" alt="Basteln" > 
						 Holzkiste </a>						
					</div>
										
					<div id="LinkBilder">
						<a href="Vogelhaus.html"> <img src="Visualisierungsversuch/Bastelanleitungen/VogelhausRef.jpg" alt="Basteln" >
						Vogelhaus </a>
					</div>
					
									
					<div id="LinkBaum" >
						<a href="ÜbersichtBasteln.html"> <p> <h1>...</h1> </p> </a>
					</div>
					
				</div>
				
								
			</div>
			
			<div name="Galerie" align="Middle">	
				
				<img class="AbstandKlasse" src="Visualisierungsversuch/Icons/Galerie.png" alt="Galerie" >
				
				<div id="galerie">
				<div id ="LinkBilder">
<script language="javascript" type="text/javascript">

var config = 
{
  nodeId: 'container',
  testPicBase :  'Galerie/',
  items : [
    {src: 'holzdekoklein.jpg', alt: ''bild1',  link: 'Holzdeko1.htm'},
    {src: 'holzdeko2klein.jpg', alt: 'bild2', link : 'Holzdeko2.htm' },
    {src: 'holzdeko3klein.jpg', alt: 'bild3', link: 'Holzdeko3.htm' },
    {src: 'holzdeko4klein.jpg', alt: 'bild4', link : 'Holzdeko4.htm'}, 
    {src: 'holzdeko5klein.jpg', alt: 'bild5', link : 'Holzdeko5.htm'  },
	{src: 'holzdeko6klein.jpg', alt: 'bild6', link : 'Holzdeko6.htm'  }, 
  ]
}; 

var bildwechsel = function (config) {
  
    var no = 0;
    var node, elm;
     elements = [];
    var self = this;
    
    function draw(elm, no){
       	elm.setAttribute('data-bildwechsel-no', no);
	elm.getElementsByTagName('img')[0].src = config.testPicBase + config.items[no].src;
	elm.getElementsByTagName('a')[0].setAttribute('href',   config.items[no].link);
    }
    
    elements =  document.getElementById(config.nodeId).getElementsByTagName('li');
    var loopArray = Array.prototype.slice.call(elements);
    while(elm = loopArray.shift()){
	if (no == config.items.length) no = 0;
	draw(elm, no);
	no++;
     }
  return {
     change: function(){
	var no = 0;
	var loopArray = Array.prototype.slice.call(elements);
        while(elm = loopArray.shift()){
	  no = elm.getAttribute('data-bildwechsel-no');
	  if (++no == config.items.length) no = 0;
	  draw(elm, no);
	}
     }
   }; 
};   
</script>
</head>
<body>
<ul id='container'>
<li>
<a href="Holzdeko1.html"> <img src="Galerie/holzdekoklein.jpg" /></a>
</li>
<li>
<a href="Holzdeko2.html"> <img src="Galerie/holzdeko2klein.jpg"/></a>
</li>
<li>
<a href="Holzdeko3.html"> <img src="Galerie/holzdeko3klein.jpg"/></a>
</li>
</ul>
<script language="javascript" type="text/javascript">

  window.onload = function() { 
    var test = new bildwechsel(config);
    window.setInterval(test.change, 2000);
  }
</script>


					
					
				</div>
				
				<script type="text/javascript">
					$('.AbstandKlasse').on('mouseover', function() {
					  $(this).next('#galerie').slideToggle("slow");
					})
				</script>
			</div>
			
			<div name="Infos" align="Middle">	
			
				<img class="AbstandKlasse" src="Visualisierungsversuch/Icons/Info.png" alt="Infos" >
				
				<div id="rechts">
				
					<div id="LinkBilder">
						<a href="WalnussBaum.html"> <img src="Visualisierungsversuch/Baeume/Walnuss/WalnussL.jpg" alt="Walnuss"> </a>
						<p> Apfelbaum <br> Haerte:weich </p>						
					</div>
					
					<div id="LinkBilder">
						<a href="Apfelbaum2.html"> <img src="Visualisierungsversuch/Baeume/apfel.jpg"alt="Apfelbaum"> </a>
						<p> Apfelbaum <br> Haerte:hart</p>						
					</div>
					
					<div id="LinkBilder">
						<a href="Kirschbaum.html"> <img src="Visualisierungsversuch/Baeume/Kirsche/KirscheRef.jpg" alt="Kirschbaum"> </a>
						<p> Kirsche <br> Haerte:weich </p>						
					</div>
					
					<div id="LinkBaum" >
						<a href="ÜbersichtBäume.html"> <p> <h1>...</h1> </p> </a>
					</div>
					
				</div>
				<script type="text/javascript">
				$('.AbstandKlasse').on('mouseover', function() {
				  $(this).next('#rechts').slideToggle("slow");
				})
				</script>
			</div>
			
			
				
			<div name="Stamm" align="middle" style="margin-bottom:10px" >
				<img src="Visualisierungsversuch/Stamm2.png" alt="Stamm" >
			</div>
		
		</div>
	
	</body>
<html>

hier jetzt mal der ganze Code nicht nur der Teil, der nicht richtig läuft

Kommentar

rkr

Dabei seit: 17.06.2013

Beiträge: 3740
#7

15.06.2014, 15:40

Moin, vielleicht ist das jetzt nicht hilfreich. Aber ich habe auch hierfür noch keine Begründung gefunden: Gibt es einen Grund, warum jQuery keinen Einsatz findet?
Kommentar

Gast

15.06.2014, 16:03

@rkr: ich wusst nicht dass sonst jquery auf der seite läuft. zum lernen am anfang schien mir ein möglichst einfach gehaltenes script recht gut.

@TE: sorry, waren zwei syntaxfehler im code. war keien absicht, passiert mir.

1.)
FALSCH:
{src: 'holzdekoklein.jpg', alt: ''bild1', link: 'Holzdeko1.htm'},
2.)
FALSCH:
ull#container li {
display: inline-block;
}

deswegen aktuell:

HTML-Code:

<script language="javascript" type="text/javascript">

var config = 
{
  nodeId: 'container',
  testPicBase :  'Galerie/',
  items : [
    {src: 'holzdekoklein.jpg', alt: 'bild1',  link: 'Holzdeko1.htm'},
    {src: 'holzdeko2klein.jpg', alt: 'bild2', link : 'Holzdeko2.htm' },
    {src: 'holzdeko3klein.jpg', alt: 'bild3', link: 'Holzdeko3.htm' },
    {src: 'holzdeko4klein.jpg', alt: 'bild4', link : 'Holzdeko4.htm'}, 
    {src: 'holzdeko5klein.jpg', alt: 'bild5', link : 'Holzdeko5.htm'  },
	{src: 'holzdeko6klein.jpg', alt: 'bild6', link : 'Holzdeko6.htm'  }, 
  ]
}; 

var bildwechsel = function (config) {
  
    var no = 0;
    var node, elm;
     elements = [];
    var self = this;
    
    function draw(elm, no){
       	elm.setAttribute('data-bildwechsel-no', no);
	elm.getElementsByTagName('img')[0].src = config.testPicBase + config.items[no].src;
	elm.getElementsByTagName('img')[0].setAttribute('alt', config.items[no].alt);
	elm.getElementsByTagName('a')[0].setAttribute('href',   config.items[no].link);
    }
    
    elements =  document.getElementById(config.nodeId).getElementsByTagName('li');
    var loopArray = Array.prototype.slice.call(elements);
    while(elm = loopArray.shift()){
	if (no == config.items.length) no = 0;
	draw(elm, no);
	no++;
     }
  return {
     change: function(){
	var no = 0;
	var loopArray = Array.prototype.slice.call(elements);
        while(elm = loopArray.shift()){
	  no = elm.getAttribute('data-bildwechsel-no');
	  if (++no == config.items.length) no = 0;
	  draw(elm, no);
	}
     }
   }; 
};   
</script>
</head>
<body>
<ul id='container'>
<li>
<a href="Holzdeko1.html"> <img src="Galerie/holzdekoklein.jpg" /></a>
</li>
<li>
<a href="Holzdeko2.html"> <img src="Galerie/holzdeko2klein.jpg"/></a>
</li>
<li>
<a href="Holzdeko3.html"> <img src="Galerie/holzdeko3klein.jpg"/></a>
</li>
</ul>
<script language="javascript" type="text/javascript">

  window.onload = function() { 
    var test = new bildwechsel(config);
    window.setInterval(test.change, 2000);
  }
</script>

<style type="text/css">
ul#container {
 list-style: none;
}
ul#container  li {
 display: inline-block;  
} 
</style>

dann ist mir aufgefallen, dein html ist invalide!
bspw:

HTML-Code:

<p> Apfelbaum <br> Haerte:weich </p> 
<html> (...) <html>

bitte fixen

Kommentar

rkr

Dabei seit: 17.06.2013

Beiträge: 3740
#9

15.06.2014, 16:44

Du wirst später wann immer es möglich ist jQuery einsetzen. Ich würde dir empfehlen, dich mit core-js später zu beschäftigen. jQuery nimmt dir viel Arbeit ab. Besonders im Bezug auf inter-browser-kompatibilität
Kommentar

Ankündigung

Bilderwechsel

Neue Werbung 2019

Bilderwechsel

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar