Image Changer with Buttons

[hakura]

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?

<div class="page">
<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>Phase 1</span></div>
  <div class="arrow2"><span>Phase 2</span></div>
  <div class="arrow3"><span>Phase 3</span></div>
     </div>
</div>
<div class="right-div1">
<img class="img" src="images/Christ/img_phase_01.png" width="719" height="880" alt=""/>
</div>

.arrow1 {
    height:60px;
    width:400px;
    background-color:#fff;
    position:relative;
    margin-bottom: 20px;
    cursor:pointer;
}

.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;
    cursor:pointer;
}
.arrow2:after {
    width:0;
    height:0;
    content:"";
    border-top:30px solid transparent;
    border-bottom:30px solid transparent;
    border-left:50px solid;
    color: #fff;
    position:absolute;
    left:100%;
}
.arrow3 {
    height:60px;
    width:400px;
    background-color:#fff;
    position:relative;
    margin-bottom: 20px;
    cursor:pointer;
}
.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;
}

$(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"});
        $(".arrow1 span").css({"color" : "#FFFFFF"});
        $(".arrow3").css({"backgroundColor" : "#FFFFFF"});
        $(".arrow2").css({"backgroundColor" : "#FFFFFF"});
        $(".arrow3 span").css({"color" : "#414141"});
        $(".arrow2 span").css({"color" : "#414141"});
        return true;
    });
    $('.arrow2').click(function() {
        img = 'images/Christ/img_phase_02.png';
        $('.right-div1 img').attr("src", img);
        $(".arrow2").css({"backgroundColor": "#66707c"});
        $(".arrow2 span").css({"color" : "#FFFFFF"});
        $(".arrow1").css({"backgroundColor" : "#FFFFFF"});
        $(".arrow3").css({"backgroundColor" : "#FFFFFF"});
        $(".arrow1 span").css({"color" : "#414141"});
        $(".arrow3 span").css({"color" : "#414141"});
        return true;
    });
    $('.arrow3').click(function() {
        img = 'images/Christ/img_phase_03.png';
        $('.right-div1 img').attr("src", img);
         $(".arrow3").css({"backgroundColor": "#66707c"});
         $(".arrow3 span").css({"color" : "#FFFFFF"});
        $(".arrow2").css({"backgroundColor" : "#FFFFFF"});
        $(".arrow1").css({"backgroundColor" : "#FFFFFF"});
        $(".arrow2 span").css({"color" : "#414141"});
        $(".arrow1 span").css({"color" : "#414141"});
        return true;
    });

});

 

[Tronjer]

Du hattest die selbe Frage bereits im XHTML-Forum gestellt, bist auf die Antworten allerdings nicht eingegangen. Also wird dir wohl auch meine nicht weiterhelfen.

1. Schritt: Slider bauen
Dazu benötigst du ein Array mit den Bildnamen, ein Timing-Event wie bsw. delay() und eine variable counter. Per delay(2000) wird alle 2s das src-Attribut des Image-Tags durch das jeweils nächste Element im Array ersetzt. Ist das letzte Element erreicht, wird der Counter wieder zurück auf 0 gesetzt.

2 Schritt: Arrow Funktion vereinheitlichen
Anstatt für jedes Element eine einzelne Funktion aufrufen, würde ich eine gemeinsame schreiben, die sowohl beim Klick als auch als Callback auf das Timing Event aufgerufen werden kann. Dazu muss ein Bezug zwischen dem Arrow und dem jeweiligen Bild hergestellt werden.

Pattern (ungestet):

<div class="arrow" data-num="1"><span>Phase 1</span></div>

$('.arrow').on('click', function() {
  var num = $(this).data('num');
  img = 'images/Christ/img_phase_0' + num + '.png';
  foobar(num);
});

function foobar(num) {
  // tu was mit den arrows
  if ( num == 1 ) {
    $('div[data-num="1"]').toggleClass('foo');
    $('div[data-num="2"]').toggleClass('bar');
    $('div[data-num="3"]').toggleClass('baz');
  } else if () {
    ......
  }
}

Um aus dem Slider die Funktion foobar aufzurufen, wäre num = arrayIndex + 1.

Soweit ein möglicher Ansatz um die drei Bilder zu tauschen. Sollten es allerdings wesentlich mehr Bilder sein, würde dieses if-else-Konstrukt schnell unübersichtlich, und man müsste sich etwas universelleres ausdenken.

Wenn dir das jetzt nicht helfen sollte und du bei Schritt 1 bereits aussteigst, dann bleibt dir nur der Weg über die Jobbörse.

 

[hakura]

Vielen Dank für diese Antwort. Ich werde mir das näher anschauen.

 

[hakura]

Hat sich erledigt. Ich hab es geschafft !