zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Image Changer with Buttons

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.01.2014, 15:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.07.2013
Ort: Switzerland
Beiträge: 27
hakura befindet sich auf einem aufstrebenden Ast
Standard 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>
CSS-CODE:
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;
}
JQUERY CODE:

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;
    });

});
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.01.2014, 11:51
Benutzer
neuer user
 
Registriert seit: 24.12.2013
Beiträge: 57
leex279 befindet sich auf einem aufstrebenden Ast
Standard

schau dir mal das an. kannst auf dein problem anpassen
jQuery Animationen zeitversetzt mit callback(), delay() und queue() | Internet | IMA - Informationen Mal Anders
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.01.2014, 18:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.07.2013
Ort: Switzerland
Beiträge: 27
hakura befindet sich auf einem aufstrebenden Ast
Standard

bin 0 weitergekommen,
Mit Zitat antworten
  #4 (permalink)  
Alt 16.01.2014, 18:59
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von hakura Beitrag anzeigen
bin 0 weitergekommen,
Mit dieser Fehlerbeschreibung kann jeder etwas anfangen.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #5 (permalink)  
Alt 16.01.2014, 19:27
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von hakura Beitrag anzeigen
bin 0 weitergekommen,
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?
Mit Zitat antworten
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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:12 Uhr.