|
|||
Image Changer with Buttons
Hallo , ich habe folgendes Problem.
Ich möchte einen automatischen Bilder Changer machen. Die Arrows sollen je nach dem welches Bild gerade ausgewählt ist mit einer anderen Farbe aufleuchten. Nun habe ich im JQuery nur den Click Image Changer gebaut. Leider weiss ich jetzt nicht wie ich die Bilder automatisch nach 2s wechseln lassen kann, dazu kommt noch, dass der Aktuelle Button mit einer anderen Farbe als Ausgewählt markiert werden muss. Kann mir da jemand helfen? HTML-CODE: HTML-Code:
<div class="left-div1"> <p>Gemeinsam mit Christ Swiss haben wir von Grund auf einen Styleguide für den Online-Auftritt entwickelt. Herausforderung: Es musste dem neu entwickelten CI von Christ Swiss entsprechen. Wie ein Diamant wurde das Design immer wieder geschliffen, bis es schlussendlich dem CI von Christ Swiss und der verlangten hohen Qualität entsprach.</p> <div class="arrow"> <div class="arrow1"><span>test</span></div> <div class="arrow2"><span>test</span></div> <div class="arrow3"><span>test</span></div> </div> </div> <div class="right-div1"> <img class="img" src="http://xhtmlforum.de/images/Christ/img_phase_01.png" width="719" height="880" alt=""/> </div> Code:
.left-div1 { float:left; width: 500px; margin-top: 230px; } .left-div1 p{ color: #FFFFFF; } .right-div1 { float:right; width: 500px; margin-top: 247px; } .right-div1 img{ height: auto; max-width: 100%; } .arrow1 { height:60px; width:400px; background-color:#fff; position:relative; margin-bottom: 20px; } .arrow1:after { width:0; height:0; content:""; border-top:30px solid transparent; border-bottom:30px solid transparent; border-left:50px solid #fff; position:absolute; left:100%; } .arrow2 { height:60px; width:400px; background-color:#fff; position:relative; margin-bottom: 20px; } .arrow2:after { width:0; height:0; content:""; border-top:30px solid transparent; border-bottom:30px solid transparent; border-left:50px solid #fff; position:absolute; left:100%; } .arrow3 { height:60px; width:400px; background-color:#fff; position:relative; margin-bottom: 20px; } .arrow3:after { width:0; height:0; content:""; border-top:30px solid transparent; border-bottom:30px solid transparent; border-left:50px solid #fff; position:absolute; left:100%; } .arrow{ margin: 0 auto; padding: 0 auto; text-align:center; width: 100%; display:block; margin-top: 80px; } Code:
$(document).ready(function() { var img; $('.arrow1').click(function() { img = 'images/Christ/img_phase_01.png'; $('.right-div1 img').attr("src", img); $(".arrow1").css({"backgroundColor": "#66707c"}); return false; }); $('.arrow2').click(function() { img = 'images/Christ/img_phase_02.png'; $('.right-div1 img').attr("src", img); $(".arrow2").css({"backgroundColor": "#66707c"}); return false; }); $('.arrow3').click(function() { img = 'images/Christ/img_phase_03.png'; $('.right-div1 img').attr("src", img); $(".arrow3").css({"backgroundColor": "#66707c"}); return false; }); }); |
Sponsored Links |
|
|||
schau dir mal das an. kannst auf dein problem anpassen
jQuery Animationen zeitversetzt mit callback(), delay() und queue() | Internet | IMA - Informationen Mal Anders |
Sponsored Links |
|
|||
Mit dieser Fehlerbeschreibung kann jeder etwas anfangen.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
|
||||
Cool, was hast du versucht? 0? Ok, toll. Oh this irony.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
mit Schleife Script reduzieren | css_user | Javascript & Ajax | 3 | 27.06.2013 16:51 |
Ausrichtung Kalender | greece4u | CSS | 20 | 14.05.2012 14:32 |
Imagemap Zugriff bei einer Gallery | Sarah14 | Javascript & Ajax | 3 | 12.11.2007 15:06 |
Problem mit dem Menü [erledigt] | Julian | CSS | 2 | 16.01.2006 00:27 |
Nicht valieder Code von Map24 | sveniboy | (X)HTML | 7 | 06.11.2005 20:19 |