zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bilder automatisch wechseln

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.11.2016, 18:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.11.2016
Beiträge: 17
Heinz_H befindet sich auf einem aufstrebenden Ast
Frage Bilder automatisch wechseln

Hallo, bin neu hier und hab eine Frage:

Wie kann ich mit CSS Bilder auf einer Seite wechseln lassen?
Das erste Bild ist als Hintergrund in einem div-Container.
Dieses soll alle 5 Sek. durch ein anderes ersetzt werden.
Muss ich dafür Javascript o. ä. verwenden?


Gruß
Heinz
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.11.2016, 08:09
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 479
dazzle89 wird schon bald berühmt werden
Standard

Was du suchst, nennt sich Slider.

Da gibt es dutzende, wenn nicht sogar hunderte, in verschiedenen Varianten. Mit <img>-Tags, als background-images, usw. und es gibt auch reine CSS-Lösungen.

Die Javascript-Slider sind aber oftmals die schöneren, funktionieren in mehr Browsern und bieten mehr Möglichkeiten. Einfach mal nach Slider googlen und gucken, welcher dir am meisten zusagt.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.11.2016, 09:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.559
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Es muss nicht sein, dass er einen Slider sucht. Wenn er das Hintergrundbild wechseln lassen will, dann ist das nicht wirklich ein slider sondern mit einfachem Javascript getan.
Mit Zitat antworten
  #4 (permalink)  
Alt 15.11.2016, 00:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.11.2016
Beiträge: 17
Heinz_H befindet sich auf einem aufstrebenden Ast
Standard

Ja, es sollen einfach alle paar Sek. Hintergrundbilder getauscht werden.
Einen üblichen Slider auf Skriptbasis wollte ich eigentlich vermeiden.
Eine CSS Lösung, die ich evt. nachvollziehen kann, wäre das Ziel.

Gruß
Heinz
Mit Zitat antworten
  #5 (permalink)  
Alt 15.11.2016, 04:54
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.01.2010
Beiträge: 973
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Solche animierten Bilderwechsel können mit CSS mittels @keyframes erzeugt werden. Die Animationen können endlos laufen.

Wenn fünf Hinergrundbilder vorhanden sind, die alle 8 Sekunden wechseln sollen wird das erste sofort eingeblendet, nach 8 Sekunden ausgeblendet und bleibt 32 Sekunden ausgeblendet. Danach beginnt der Vorgang von vorne.

Das zweite Bild wird nach 8 Sekunden eingeblendet, bleibt 8 Sekunden sichtbar und bleibt 24 Sekunden ausgeblendet. Danach beginnt der Vorgang von vorne.

Das dritte Bild wird nach 16 Sekunden eingeblendet, bleibt 8 Sekunden sichtbar und bleibt 16 Sekunden ausgeblendet. Danach beginnt der Vorgang von vorne.

Und so weiter.

Damit sind aber auch andere Lösungen denkbar. So können alle Bilder zu einem einzigen großen Bild zusammengesetzt werden und das große Bild wird so verschoben, dass zeitgesteuert immer nur eins sichtbar ist.

Siehe

https://www.mediaevent.de/tutorial/c...keyframes.html

und

https://www.mediaevent.de/css/backgr...e-mehrere.html

Für eine andere Anfrage habe ich vor einiger Zeit einmal eine zeitgesteuere Animation mit Vordergrundbildern erstellt. Das Prinzip ist aber das gleiche. Nachfolgend der zugehörige Quelltext:

Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Animation 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   /*Meine persönlichen Grundeinstellungen für alle Seiten*/
   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: Sans-Serif;
         font-size: 120%; /*für die Einheit rem, mit der ich gerne arbeite*/
      }
      body {
         margin: 0;
      }
   }

   /* ==================================================== */
   /* ***Ab hier beginnen die Angaben zur Problemlösung*** */

   /*Spezielle Einstellungen*/
   @media all {
   }

   h1 {
      margin-top: 13rem;
   }
   img {
      position: absolute;
      top: 1rem;
      left: 1rem;
   }

   /*Animation*/
   .animated1 {
      -webkit-animation-duration: 16s;
      animation-duration: 16s;            
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
      -webkit-animation-iteration-count: 1;
      animation-iteration-count: 1;
      -webkit-animation-direction: alternate;
      animation-direction: alternate;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
   }
   @-webkit-keyframes zoomIn1 {
      from {
         opacity: 0;
         -webkit-transform: scale3d(.3, .3, .3);
         transform: scale3d(.3, .3, .3);
      }
      12% {
         opacity: 1;
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1);
      }
      25% {
         opacity: 0;
         -webkit-transform: scale3d(.3, .3, .3);
         transform: scale3d(.3, .3, .3);
      }
      75% {
         opacity: 0;
         -webkit-transform: scale3d(.3, .3, .3);
         transform: scale3d(.3, .3, .3);
      }
      100% {
         opacity: 1;
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1);
      }
   }
   @keyframes zoomIn1 {
      from {
         opacity: 0;
         -webkit-transform: scale3d(.3, .3, .3);
         transform: scale3d(.3, .3, .3);
      }
      12% {
         opacity: 1;
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1);
      }
      25% {
         opacity: 0;
         -webkit-transform: scale3d(.3, .3, .3);
         transform: scale3d(.3, .3, .3);
      }
      75% {
         opacity: 0;
         -webkit-transform: scale3d(.3, .3, .3);
         transform: scale3d(.3, .3, .3);
      }
      100% {
         opacity: 1;
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1);
      }
   }
   .zoomIn1 {
      -webkit-animation-name: zoomIn1;
      animation-name: zoomIn1;
   }
   .animated2 {
      -webkit-animation-duration: 4s; /* Dauer der Animation */
      animation-duration: 4s;            
      -webkit-animation-delay: 4s;    /* Startverzögerung */
      animation-delay: 4s;
      -webkit-animation-iteration-count: 2;
      animation-iteration-count: 2;
      -webkit-animation-direction: alternate;
      animation-direction: alternate;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
   }
   @-webkit-keyframes zoomIn2 {
      from {
         opacity: 0;
         -webkit-transform: scale3d(.3, .3, .3);
         transform: scale3d(.3, .3, .3);
      }
      40% {
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1);
      }
      50% {
         opacity: 1;
      }
   }
   @keyframes zoomIn2 {
      from {
         opacity: 0;
         -webkit-transform: scale3d(.3, .3, .3);
         transform: scale3d(.3, .3, .3);
      }
      40% {
         -webkit-transform: scale3d(1, 1, 1);
         transform: scale3d(1, 1, 1);
      }
      50% {
         opacity: 1;
      }
   }
   .zoomIn2 {
      -webkit-animation-name: zoomIn2;
      animation-name: zoomIn2;
   }

   /* ***       Ende der Angaben zur Problemlösung***       */
   /* ===================================================== */

   </style>
</head>
<body>
   <img class="animated1 zoomIn1" src="http://lorempixel.com/300/200/transport" alt="Beispielbild">
   <img class="animated2 zoomIn2" src="http://lorempixel.com/300/200/technics" alt="Beispielbild">
   <h1>Information</h1>
   <p>Der CSS-Quelltext ist ziemlich sperrig, da ich mich dabei nach animate.css gerichtet und ihn nicht weiter optiermiert habe.</p>
   <p>Zunächst wird ein Bild eingeblendet und kurz danach durch ein zweites ersetzt. Nach ungefähr 10 Sekunden erscheint wieder das erste Bild, welches dauerhaft stehen bleibt.</p>
</body>
</html>
Insgesamt solltest du aber bedenken das zeitgesteuert wechselnde Bilder die Besucher nur nerven. Die Webseitenersteller begehen Zeitdiebstahl an ihren Besuchern und Hintergrundbilder, die nur schmückendes Beiwerk sind, erhalten eine Aufmerksamkeit, die sie nicht verdienen.

Gruss

MrMurphy

Geändert von MrMurphy (15.11.2016 um 05:16 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 15.11.2016, 23:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.11.2016
Beiträge: 17
Heinz_H befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von MrMurphy Beitrag anzeigen
Hintergrundbilder, die nur schmückendes Beiwerk sind, erhalten eine Aufmerksamkeit, die sie nicht verdienen.
Verstehe, Effekthascherei auf Webseiten ist nervig.
Danke, schau mal ob ich das verarbeitet bekomme.

Gruß
Heinz
Mit Zitat antworten
  #7 (permalink)  
Alt 05.12.2016, 18:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.11.2016
Beiträge: 17
Heinz_H befindet sich auf einem aufstrebenden Ast
Standard Slider

Setze jetzt diesen Code ein:

Zitat:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="scripts/jquery.cycle.all.2.74.js"></script>
<script>
$(document).ready(function() {
$('#slideshow').cycle({
fx: 'fade',
pager: '#smallnav',
pause: 1,
speed: 1800,
timeout: 3500
});
});
</script>
Zitat:
<div id="slideshow">
<img src="/images/b1.jpg" class="bgM"/>
<img src="/images/b2.jpg" class="bgM"/>
<img src="/images/b3.jpg" class="bgM"/>
<img src="/images/b4.jpg" class="bgM"/>
<img src="/images/b5.jpg" class="bgM"/>
</div>
Zitat:
#slideshow, img.bgM {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index:-9999;
}
Und die http://malsup.github.io/jquery.cycle.all.js

setzte ich in den Ordner root - scrips ...

Nach dieser Anleitung: http://michaelsoriano.com/create-rot...ss-and-jquery/

Funktioniert nicht?! Es wird einfach nur das letzte Bild angezeigt.

Wie kann ich den body image Hintergrund alles paar Sekunden wechseln?

Kann nur Html und CSS. Hilfe wäre gut und nachvollziehen kann ich es eh nicht mehr! Danke.


Gruß
Heinz

Geändert von Heinz_H (05.12.2016 um 23:34 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 06.12.2016, 00:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.11.2016
Beiträge: 17
Heinz_H befindet sich auf einem aufstrebenden Ast
Standard

Das wäre auch in Ordnung.

Die Hintergrundbilder wechseln automatisch alle 5 Sekunden.

Bekomms aber auch nicht hin ...


Gruß
Heinz
Mit Zitat antworten
  #9 (permalink)  
Alt 06.12.2016, 07:58
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.559
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Zitat:
Zitat von Heinz_H Beitrag anzeigen
Setze jetzt diesen Code ein:

Code:
<script type="text/javascript" src="scripts/jquery.cycle.all.2.74.js"></script>
Und die http://malsup.github.io/jquery.cycle.all.js

setzte ich in den Ordner root - scrips ...
Die Dateien müssen schon gleich heißen.
Ansonsten: Schau auch mal in die Fehlerkonsole, dort sollten dir solche Dinge sofort auffallen.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 06.12.2016, 08:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.11.2016
Beiträge: 17
Heinz_H befindet sich auf einem aufstrebenden Ast
Standard

Danke. Habs umbenannt und der Ordner scripts hieß auch scrips ...
Läuft abr immer noch nicht. Es wird nur das letzte Bild angezeigt.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hintergrund wird nicht angezeigt maxx CSS 6 14.10.2012 18:27
Hilfe!!! mein Homepagelayout funktioniert nicht! maxx CSS 5 14.10.2012 07:21
Bilder automatisch verkleinern greenslot Serveradministration und serverseitige Scripte 4 16.11.2011 11:41
Bilder mit Hover wechseln --> KNIFFLIG! lkwpeter123 CSS 3 23.05.2011 16:36
Bilder im Text automatisch unterbringen Steakfred Offtopic 1 12.05.2008 20:38


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:53 Uhr.