Ankündigung

Einklappen
Keine Ankündigung bisher.

Bilderwechsel

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Bilderwechsel

    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>


  • #2
    Du möchtst eine SlideShow haben?!

    Da gibt es genug Codes/Frameworks bei Google.

    Kommentar


    • #3
      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


      • #4
        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


        • #5
          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


          • #6
            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


            • #7
              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?
              Standards - Best Practices - AwesomePHP - Guideline für WebApps

              Kommentar


              • #8
                @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


                • #9
                  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
                  Standards - Best Practices - AwesomePHP - Guideline für WebApps

                  Kommentar

                  Lädt...
                  X