• Seite 1 von 1
  • 1
Gemeinschaft uCoz » Archiv » Archiv » Grafiken wechseln lassenn im Header
Grafiken wechseln lassenn im Header
alfabm
Beiträge: 748
Ruf: 14
Beitrag # 1 | 14:39
Ich habe mal eine Frage:

Ich habe im Header eine Banner eingefügt als den Logotext nun möchte ich aber das das Banner automatisch wechselt.
Also habe da drei verschiedene Banner in der selben Größe wie mache ich das.

erst Bild 1 dann vielleicht 2 Sekunden später Bild 2 und nach 2 Sekunden Bild 3 und dann wieder Bild1

Versteht ihr was ich will?

so wie auf der Seite hier ungefähr: http://www.absoluto.de/


Beitrag wurde von alfabm - Montag, 07.02.2011, 14:47 bearbeitet
Cheburator
Beiträge: 2172
Ruf: 83
Beitrag # 2 | 15:44
Also entweder du guckst selber nach jQuery Slider oder du versucht Nivo Slider.
Wenn du Nivo Slider bei dir einbauen willst dann folge einfach dieser Anleitung:
1. Lad das Archiv runter, entpacke es und lad es hoch - http://dev7studios.com/downloads/37
2. Auf füge diesen Code vor </body> ein:
Code
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>    
<script type="text/javascript">        
$(window).load(function() {        
          $('#slider1').nivoSlider({ pauseTime:5000, pauseOnHover:false });        
          setTimeout(function(){        
          $('#slider2').nivoSlider({ pauseTime:5000, pauseOnHover:false });        
          }, 1000);        
          setTimeout(function(){        
          $('#slider3').nivoSlider({        
          pauseTime:5000,        
          pause OnHover: false,        
          c ontrolN avThumbs:t rue        
          });        
          }, 2000);
          setTimeout(function(){        
          $('#slider4').nivoSlider({        
          effect:'random',        
          animSpeed:1 500,        
          p  auseTime :5000,        
          s tartSlide:4,        
          dir ectionNav:false,        
          controlNav:true,        
          keyboardNav:false,        
          pauseOnHover:false        
          } );        
          }, 3000);        
});        
</script>

Wähle jetzt einen von den Codes aus, und füge ihn dort ein wo der Slider sein soll.:
Code
<h2>Standard</h2>        
          <div id="slider1" class="nivoSlider">        
          <img src="/images/up.jpg" alt="" />        
          <img src="/images/monstersinc.jpg" alt=""/>        
          <img src="/images/nemo.jpg" alt="" />        
          <img src="/images/walle.jpg" alt="" />        
          </div>        
<br/>

Code
<h2>Mit verlinkung und einer Beschreibung</h2>        
          <div id="slider2" class="nivoSlider">        
          <a href="/"><img src="/images/up.jpg" title="Beschreibung №1" /></a>        
          <a href="/"><img src="/images/monstersinc.jpg" title="Beschreibung №2" /></a>        
          <a href="/"><img src="/images/nemo.jpg" title="Beschreibung №3" /></a>        
          <a href="/"><img src="/images/walle.jpg" title="Beschreibung №4" /></a>        
          </div>        
<br/>

Code
<h2>Mit Thumbnails</h2>        
          <div id="slider3" class="nivoSlider">        
          <img src="/images/up.jpg" alt="" />        
          <img src="/images/monstersinc.jpg" alt=""/>        
          <img src="/images/nemo.jpg" alt="" />        
          <img src="/images/walle.jpg" alt="" />        
          </div>

Code
<h2>In zufälliger Reihenfolge</h2>        
          <div id="slider4" class="nivoSlider">        
          <img src="/images/up.jpg" alt="" />        
          <img src="/images/monstersinc.jpg" />        
          <img src="/images/nemo.jpg" alt="" />        
          <img src="/images/walle.jpg" alt="" />        
          </div>

Wenn du eine Beschreibung zu einem Bild einfügen willst dann füge dort noch das atribut title="" ein.
Vergess nicht die Bilder durch deine eigenen zu ersetzen smile


Meine uCoz Website: uScripts.de
Mein Blog: *Soon*
NuMetal
Beiträge: 912
Ruf: 33
Beitrag # 3 | 17:30
Cheburator, das ist ein gutes Tutorial für uHelp smile
Habe dies eigentlich auch gebraucht aber brauche es grade nicht wink



Würde mich für Hilfe über ein + im Ruf oder eine Auszeichnung freuen :)
alfabm
Beiträge: 748
Ruf: 14
Beitrag # 4 | 17:45
ok danke werde ich mal testen.Mal sehen ob ich es hin bekomme. biggrin

Gemeinschaft uCoz » Archiv » Archiv » Grafiken wechseln lassenn im Header
  • Seite 1 von 1
  • 1
Suche: