00 Stimmen

HTML: Laufschrift mit Grafik und Links

Frage von Alaska1966 | 03.02.2015 um 10:52

Hallo zusammen!

Ich habe da mal eine Frage. Ist es möglich per JavaScript eine Laufschrift zu erstellen mit Grafik und Links so wie auf der Seite von der www.SPD.de?

Ich wäre für Hilfe dankbar. Gruß Peter

AntwortenPositivNegativDatumStimmen
00 Stimmen

Wie wäre es zum Beispiel mit dem jQuery Plugin Smooth Div Scroll? Vielleicht benutzt du ja sowieso schon jQuery auf deiner Homepage.

Auf der Seite finden sich einige Beispiele, die deiner Idee denke ich mal ganz nahe kommen: Zum Beispiel Scrolling Mixed Content mit Bildern, Texten und Links.

Im Enddeffekt kannst du beliebige Inhalte in eine DIV-Box packen und mit dem Scroller bewegen. Das sollte dir genug Möglichkeiten geben.
03.02.2015 um 14:12

AntwortenPositiv Negativ
00 Stimmen

Nee das ist nicht das was ich suche. Auf meiner HP habe ich bisher alles in Java.

Ich suche sowas wie auf der Seite der WWW.SPD.de Da ich kaum Englisch kann bin ich meisten auf Deutsche Seiten angewiesen und unter Google habe ich nichts gefunden. Wäre also dankbar wenn jemand mir den Javacode zur Verfügung stellt.

Das ganze sollte auch umlaufend sein ohne Pause. Also ohne Freiraum mit mehren Grafiken und mehren Links (also Grafik, Link und Grafik, Link und so weiter).
04.02.2015 um 10:13

Positiv Negativ
00 Stimmen

Bist du dir sicher dass du Java benutzt und nicht JavaScript? Java wäre sehr ungewöhnlich für eine Homepage und auf der SPD-Seite ist die Geschichte auch mit JavaScript und jQuery umgesetzt, wenn man sich den Quellcode ansieht. jQuery ist eine JavaScript-Bibliothek, die einige Funktionen zur Verfügung stellt, mit denen die Arbeit einfacher wird.

Ich habe mir einmal die Mühe gemacht und geschaut, was die Seite genau benutzt. Es ist der bxSlider für jQuery. Schau dir einfach mal hier die Seite mit den Beispielen an und klick dich durch die Links. Die Beispiele sind alle mit Code, viel Englisch braucht man dafür nicht.
04.02.2015 um 16:27

Positiv Negativ
Antworten
00 Stimmen

Die sind nicht schlecht.

Ich meinte ja auch Javascript sorry.

Ok ich habe was gefunden doch wie binde ich das jetzt ein.

JS

$('.bxslider').bxSlider({
  auto: true,
  autoControls: true
});

HTML

<ul class="bxslider">
  <li><img src="/images/730_200/hill_trees.jpg" /></li>
  <li><img src="/images/730_200/me_trees.jpg" /></li>
  <li><img src="/images/730_200/houses.jpg" /></li>
</ul>

Kannst du mir eine beispiel seite erstellen mit dem http://bxslider.com/examples/multiple-slideshows
Beispiel 2 ich habe es 2 Stunden versucht bekomme es nicht hin.
04.02.2015 um 17:30

AntwortenPositiv Negativ
00 Stimmen

Also das Script läuft jetzt, nur jetzt habe ich ein Problem sie laufen nicht in der Mitte sondern sind abgeschnitten und es läuft immer nur eins durch, ich hätte aber gerne drei und durch gehend. Siehe www.fnd.6te.net kann mir jemand helfen?

Der Script Code

<script type="text/javascript">
$'.bxslider').bxSlider({
  mode: "horizontal",
  minSlides: 1,
  maxSlides: 10,
  slideWidth: 40,
  slideMargin: 150,
  ticker: true,
  tickerHover: true,
  useCSS: false,
  speed: 40000,
  autoDirection:"prev"
});
</script>

Danke.
05.02.2015 um 08:35

Positiv Negativ
00 Stimmen

Sieht doch schon ganz gut aus, man müsste jetzt halt einfach ein bisschen mit den ganzen Variablen herum probieren, solange bis es passt.

Ändere einfach die CSS Werte für UL und LI und die BOX und die Parameter für den BXSlider, bis es gut aussieht.
05.02.2015 um 14:19

Positiv Negativ
Antworten
Antworten

Ähnliche Themen

jQuery: CSS Stylesheet Switcher

Tutorial | 1 Kommentar

CSS-Stylesheets in HTML einbinden

Tutorial | 0 Kommentare

PHP: Eine E-Mail versenden

Tutorial | 0 Kommentare

Wichtiger Hinweis

Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.

Jetzt mitmachen

Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.