Bildänderung im Slider

    Hallo,

    danke für die freundliche Aufnahme im Forum.


    Ich bin gerade beim erstellen einer HTML One-Page Website. Die Eröffnung erfolgt mittels eines Sliders. Es kommen verschiedene Bilder und Texte zum vorschein. Unter anderen ein Buch.


    Meine Vorstellung wäre, dass jedesmal wenn die Website aufgerufen wird ein anderes Buch im Slider erscheint. Leider habe ich dafür keine Lösung gefunden. Vielleicht kann mir hier jemand helfen.


    Hier ist die Layerzeile aber damit kann ich ja nur immer das gleiche Buch aufrufen.


    <!-- LAYER NR. 4 -->

    <div class="tp-caption tp-resizeme rs-parallaxlevel-4" id="slide-699-layer-3" data-x="['left','left','center','center']" data-hoffset="['593','633','-110','-60']" data-y="['top','top','top','bottom']" data-voffset="['183','203','590','20']" data-width="none" data-height="none" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="x:right;s:1500;e:Power3.easeOut;" data-transform_out="opacity:0;s:1500;e:Power4.easeIn;s:1500;e:Power4.easeIn;" data-start="2750" data-responsive_offset="on" style="z-index: 8;"><img src="img/book1.png" alt="" width="430" height="540" data-ww="['430px','430px','200px','170px']" data-hh="['540px','540px','251px','213px']" data-no-retina>

    </div>


    Es grüßt

    Johannes

    Versuche dieses:

    Code
    <div class="tp-caption tp-resizeme rs-parallaxlevel-4" id="slide-699-layer-3" data-x="['left','left','center','center']" data-hoffset="['593','633','-110','-60']" data-y="['top','top','top','bottom']" data-voffset="['183','203','590','20']" data-width="none" data-height="none" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="x:right;s:1500;e:Power3.easeOut;" data-transform_out="opacity:0;s:1500;e:Power4.easeIn;s:1500;e:Power4.easeIn;" data-start="2750" data-responsive_offset="on" style="z-index: 8;"><img id="book" src="img/book1.png" alt="" width="430" height="540" data-ww="['430px','430px','200px','170px']" data-hh="['540px','540px','251px','213px']" data-no-retina>
</div>
<script>
    var books = ["book1.png", "book2.png", "book3.png", "book4.png"]; // ggf. aendern/erweitern
    var idx = Math.floor(Math.random() * books.length);
    book.src = books[idx];
</script>

    In dem Layercode habe ich dem Bild die ID "book" gegeben. Nicht getestet.

    Ich habe im Script aus books = book gemacht.


    Allerdings bringt mir der Layer immer nur das book1.png zur Ansicht. book2.png, book3.png usw. liegen im gleichen Ordner.

    Nein, ID des img-Elementes ist "book" und dem entsprechend book.src = ...

    aber Variablenname des Arrays lautet "books" und dem entsprechend books[idx]

    Vielleicht hätte ich sie anders benennen sollen:

    Code
    <div class="tp-caption tp-resizeme rs-parallaxlevel-4" id="slide-699-layer-3" data-x="['left','left','center','center']" data-hoffset="['593','633','-110','-60']" data-y="['top','top','top','bottom']" data-voffset="['183','203','590','20']" data-width="none" data-height="none" data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="x:right;s:1500;e:Power3.easeOut;" data-transform_out="opacity:0;s:1500;e:Power4.easeIn;s:1500;e:Power4.easeIn;" data-start="2750" data-responsive_offset="on" style="z-index: 8;"><img id="idimgbook" src="img/book1.png" alt="" width="430" height="540" data-ww="['430px','430px','200px','170px']" data-hh="['540px','540px','251px','213px']" data-no-retina>
</div>
<script>
    var arrayofbooks = ["book1.png", "book2.png", "book3.png", "book4.png"]; // ggf. aendern/erweitern
    var idx = Math.floor(Math.random() * arrayofbooks.length);
    idimgbook.src = arrayofbooks[idx];
</script>

    Das Skript funktioniert, jedoch werden die Bilder nicht gefunden. Sie müssen im selben Verzeichnis liegen wie die HTML-Datei:

    http://weibsbilder-design.de/h…gdurzrvuvzrv/wb-demo.html


    Das Bild wird hier gesucht:

    http://weibsbilder-design.de/h…l12gdurzrvuvzrv/bild3.png


    Edit: Da habe ich bei deinem ersten Posting nicht richtig hin gesehen: Die Bilder stehen im Verzeichnis img, d. h. das Array muss so aussehen:

    Code
    var arrayofbooks = ["img/book1.png", "img/book2.png", "img/book3.png"];

    BTW: Cooler Mousemove-Effekt.

    Funktioniert. Vielen Dank für die Hilfe.


    Ja der Effekt ist Klasse. Leider nicht auf meinem Mist gewachsen. Ist von Canvas bei Themeforest.


    Nochmals vielen Dank.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden