find-templates

banner slider

zurück zur Übersicht

Banner Slider



Fahre mit der Maus über die Banner. Die Grafik kann auch komplett ausfahren (siehe Code 2).
Die Farbe hinter der Grafik kann an jeden Banner angepasst werden (siehe Code 3)






Schritt 1: Der CSS Code


Baukasten-Design "CSS" : Code einfügen im Feld "css ohne style tags".
Alle anderen Designs: Einfügen im Feld "Text über Design", vor dem --></style> 

		
/* Feld der Grafiken */	
ul.hover_block li {
  list-style: none;
  padding: 10px;
  width: 468px;
  background-color: #FFFFFF;
  border: 1px solid #c9c9c9;
  margin-bottom: 20px; }


/* Feld mit Text */
ul.hover_block li a {
  display: block;
  position: relative;
  text-decoration: none;
  overflow: hidden;
  padding: 10px;
  height: 40px;
  width: 448px;
  color: #ffffff;
  font-size: 14px;
  border: 1px solid #c9c9c9; }


/* Grafiken */
ul.hover_block li img {
  position: absolute; top: 0; left: 0; border: 0;}

Wenn noch KEINE CSS-Codes im Feld "Text über Design" eingefügt wurden sind:
Schreibe vor dem Code <style type="text/css"><!-- und NACH dem Code --></style>




Schritt 2: jQuery javascript Code


- auf "Eigene Seiten editieren"
- Seite wählen, wo das "Menü" hinein soll
- im Editor oben links auf "Quellcode" klicken
- und zu Beginn der Seite diesen Javascript-Code einfügen:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
	$('ul.hover_block li').hover(function(){
	$(this).find('img').animate({left:'250px'},{queue:false,duration:500});
			}, function(){
	$(this).find('img').animate({left:'0px'},{queue:false,duration:500});
			});
		});
</script>

• bei left:'250px' kannst Du einstellen, wie weit die Grafik nach Rechts fahren soll.
• wenn Grafik komplett raus fahren soll, left:'468px' (Banner ist 468 Pixel breit)
• bei duration:500} kannst du die Geschwindigkeit einstellen.



Schritt 3: Der HTML-Code für den Seiteninhalt


gleich nach dem Javascript-Code mit einfügen, oder an gewünschter Stelle im Inhalt: 

<ul class="hover_block">
<li>
<a href="LINK" style="background-color: #202020;"><img src="Grafikadresse" alt="" />
Textzeile 1<br />Textzeile 2</a>
</li>

<li>
<a href="LINK" style="background-color: #c24c09;"><img src="Grafikadresse" alt="" />
Textzeile 1<br />Textzeile 2</a>
</li>

<li>
<a href="LINK" style="background-color: #326a8b;"><img src="Grafikadresse" alt="" />
Textzeile 1<br />Textzeile 2</a>
</li>
		
</ul>


Bei background-color: kannst Du eine Farbe angeben.
zum Beispiel den Farbton, den auch die Grafik als Hintergrund hat.

Bei LINK kommt die Adresse der Seite hinein, wo die Verlinkung hinführen soll.

Bei Grafikadresse kommt die URL des Banners hinein.
Beispiel für Grafikadresse: //img.webme.com/pic/../name/bildername.jpg




Heute: 1 Besucher