Auf Thema antworten 2026

Beitrag

<blockquote data-quote="Enigmon" data-source="post: 2514071" data-attributes="member: 6117">Hallo Leute,ich bin dabei einen Kreisel-Slider zu programmieren (3 &quot;Bilder&quot; sichtbar, Front gross die anderen klein).Ich weiss, es gibt genügend Plugins, aber ich möchte auch das Prinzip dahinter erlernen/verstehen.Nun zu meinem Problem. Ich habe 3 Klassen &quot;front&quot;, &quot;left&quot; und &quot;right&quot;. Wenn ich auf das Bild / div mit der Klasse left klicke, soll der Kreisel sich nach rechts drehen und die Klassen neu zugeordnet werden, d.h. das ehemalige linke Bild / div erhält die Klasse front und es wird die Klasse left entfernt usw.Es funktioniert auch alles sehr gut. Im Firebug ist auch zu sehen das Klassen sich ändern.Aber: In dem Bsp. löst nur der Klick auf das Bild / div mit Klasse left ein Ereignis aus, d.h. es sollte nur immer das linke Bild / div eine Reaktion auslösen. Aber es lässt sich nur das Bild / div mit der originalen Anfangsklasse left anklicken egal ob sie nun front oder right als Klasse hat.Wo könnte mein Denkfehler liegen?Vielen Dank schon mal im VorausThomasHier der Quellcode (Ein Bild sagt mehr als viele Worte):[html]&lt;!DOCTYPE html&gt;&lt;html lang=&quot;de-DE&quot;&gt;&lt;head&gt;&lt;meta charset=&quot;UTF-8&quot;&gt;&lt;title&gt;Kreisel-Slider&lt;/title&gt;&lt;!--[if lt IE 9]&gt;&nbsp; &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.js&quot;&gt;&lt;/script&gt;&lt;![endif]--&gt;&lt;script src=&quot;http://code.jquery.com/jquery-latest.js&quot;&gt;&lt;/script&gt;&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery-2.1.0.min.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;js/JQuery-Karusell-Slider.js&quot;&gt;&lt;/script&gt;&lt;style&gt;header, section, footer, aside, nav, main, article, figure {&nbsp; &nbsp; display: block;}#karusell-slider{&nbsp; &nbsp; width: 960px; height:400px; overflow: hidden;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; margin: 50px auto 20px;&nbsp;&nbsp; }#karusell-slider img{&nbsp; &nbsp; border: 1px solid black;&nbsp;&nbsp; }#karusell-slider&gt;div{&nbsp; &nbsp; /*background: rgb(127,127,127);*/&nbsp; &nbsp; border: 1px solid black;}.front{&nbsp; &nbsp; position: absolute; left: 180px;&nbsp; &nbsp; width: 600px; height: 300px; z-index: 50; margin: 0px auto 10px; top: 30px;&nbsp; &nbsp; background: rgb(65,76,170);}.left{&nbsp; &nbsp; position: absolute; left: 0;&nbsp; &nbsp; width: 400px; height:200px; z-index: 30; float: left;&nbsp; &nbsp; background: rgb(255,224,93);}.right{&nbsp; &nbsp; position: absolute; right: 0;&nbsp; &nbsp; width: 400px; height:200px; z-index: 30; float: right;&nbsp; &nbsp; background: rgb(92,185,59);}.other{&nbsp; &nbsp; display: none;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;header&gt;&lt;/header&gt;&lt;nav&gt;&lt;/nav&gt;&lt;section&gt;&lt;div id=&quot;karusell-slider&quot;&gt;&nbsp; &nbsp; &lt;div id=&quot;ks_1&quot; class=&quot;front&quot; &gt;&lt;b&gt;Ich bin jetzt front-Klasse&lt;/b&gt;&lt;/div&gt;&nbsp; &nbsp; &lt;div id=&quot;ks_2&quot; class=&quot;left&quot; &gt;&lt;b&gt;Ich bin jetzt left-Klasse&lt;/b&gt;&lt;/div&gt;&nbsp; &nbsp; &lt;div id=&quot;ks_4&quot; class=&quot;right&quot;&gt;&lt;b&gt;Ich bin jetzt right-Klasse&lt;/b&gt;&lt;/div&gt;&lt;/div&gt;&lt;div id=&quot;Kontrolle&quot;&gt;Kontrolle: &lt;/div&gt;&lt;/section&gt;&lt;footer&gt;&lt;/footer&gt;&lt;/body&gt;&lt;/html&gt; [/html]hier die JS- Datei:[code=JavaScript]$(document).ready(function(){&nbsp;&nbsp; &nbsp;&nbsp; $(&quot;.left&quot;).click(function(){&nbsp; &nbsp;&nbsp; $(&quot;#Kontrolle&quot;).append(&quot;LeftClick; &quot;);&nbsp; &nbsp;&nbsp; rotateRight();&nbsp;&nbsp; });&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; $(&quot;.right&quot;).click(function(){&nbsp; &nbsp;&nbsp; $(&quot;#Kontrolle&quot;).append(&quot;RightClick; &quot;);&nbsp;&nbsp; });&nbsp;&nbsp; &nbsp;&nbsp; $(&quot;.front&quot;).click(function(){&nbsp; &nbsp;&nbsp; $(&quot;#Kontrolle&quot;).append(&quot;FrontClick; &quot;);&nbsp;&nbsp; });&nbsp;&nbsp; });function rotateRight(){&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; $( &quot;.left&quot; ).animate({&nbsp; &nbsp; &nbsp;&nbsp; width: &quot;600px&quot;,&nbsp; &nbsp; &nbsp;&nbsp; height: &quot;300px&quot;,&nbsp; &nbsp; &nbsp;&nbsp; left: &quot;+=180&quot;,&nbsp; &nbsp; &nbsp;&nbsp; top: &quot;+=30&quot;,&nbsp; &nbsp;&nbsp; }, 500, &quot;swing&quot;,function() {&nbsp; &nbsp; &nbsp;&nbsp; $(this).css(&#039;z-index&#039;, 50);&nbsp; &nbsp; &nbsp;&nbsp; $(this).addClass(&quot;front&quot;);&nbsp; &nbsp; &nbsp;&nbsp; $(this).removeClass(&quot;left&quot;);&nbsp; &nbsp; &nbsp;&nbsp; $(this).append(&quot;Ich bin jetzt &quot;+$(this).attr(&#039;class&#039;)+&quot;-Klasse&quot;);&nbsp; &nbsp;&nbsp; });&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; $(&quot;.front&quot;).animate({&nbsp; &nbsp; &nbsp;&nbsp; width: &quot;400px&quot;,&nbsp; &nbsp; &nbsp;&nbsp; height: &quot;200px&quot;,&nbsp; &nbsp; &nbsp;&nbsp; left: &quot;+=380&quot;,&nbsp; &nbsp; &nbsp;&nbsp; top: &quot;-=30&quot;,&nbsp; &nbsp;&nbsp; },500,function() {&nbsp; &nbsp; &nbsp;&nbsp; $(this).css(&#039;z-index&#039;, 30);&nbsp; &nbsp; &nbsp;&nbsp; $(this).addClass(&quot;right&quot;);&nbsp; &nbsp; &nbsp;&nbsp; $(this).removeClass(&quot;front&quot;);&nbsp; &nbsp; &nbsp;&nbsp; $(this).append(&quot;Ich bin jetzt &quot;+$(this).attr(&#039;class&#039;)+&quot;-Klasse&quot;);&nbsp; &nbsp;&nbsp; });&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; $(&quot;.right&quot;).animate({&nbsp; &nbsp; &nbsp;&nbsp; left: &quot;0&quot;,&nbsp; &nbsp;&nbsp; },500,&quot;swing&quot;,function(){&nbsp; &nbsp; &nbsp;&nbsp; $(this).css(&#039;z-index&#039;, 30);&nbsp; &nbsp; &nbsp;&nbsp; $(this).addClass(&quot;left&quot;);&nbsp; &nbsp; &nbsp;&nbsp; $(this).removeClass(&quot;right&quot;);&nbsp; &nbsp; &nbsp;&nbsp; $(this).append(&quot;Ich bin jetzt &quot;+$(this).attr(&#039;class&#039;)+&quot;-Klasse&quot;);&nbsp; &nbsp;&nbsp; });&nbsp; &nbsp;&nbsp; }[/code]</blockquote>

[QUOTE="Enigmon, post: 2514071, member: 6117"] Hallo Leute, ich bin dabei einen Kreisel-Slider zu programmieren (3 "Bilder" sichtbar, Front gross die anderen klein). Ich weiss, es gibt genügend Plugins, aber ich möchte auch das Prinzip dahinter erlernen/verstehen. Nun zu meinem Problem. Ich habe 3 Klassen [B]"front", "left"[/B] und[B] "right"[/B]. Wenn ich auf das [I]Bild / div[/I] mit der Klasse left klicke, soll der Kreisel sich nach rechts drehen und die Klassen neu zugeordnet werden, d.h. das ehemalige linke [I]Bild / div[/I] erhält die Klasse[B] front [/B]und es wird die Klasse [B]left[/B] entfernt usw. Es funktioniert auch alles sehr gut. Im Firebug ist auch zu sehen das Klassen sich ändern. Aber: In dem Bsp. löst nur der Klick auf das [I]Bild / div [/I]mit Klasse [B]left[/B] ein Ereignis aus, d.h. es sollte nur immer das linke [I]Bild / div[/I] eine Reaktion auslösen. Aber es lässt sich nur das [I]Bild / div[/I] mit der originalen Anfangsklasse left anklicken egal ob sie nun [B]front[/B] oder [B]right[/B] als Klasse hat. Wo könnte mein Denkfehler liegen? Vielen Dank schon mal im Voraus Thomas Hier der Quellcode (Ein Bild sagt mehr als viele Worte): [html]<!DOCTYPE html> <html lang="de-DE"> <head> <meta charset="UTF-8"> <title>Kreisel-Slider</title>  <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script> <script src="js/JQuery-Karusell-Slider.js"></script> <style> header, section, footer, aside, nav, main, article, figure { display: block; } #karusell-slider{ width: 960px; height:400px; overflow: hidden; position: relative; margin: 50px auto 20px; } #karusell-slider img{ border: 1px solid black; } #karusell-slider>div{ /*background: rgb(127,127,127);*/ border: 1px solid black; } .front{ position: absolute; left: 180px; width: 600px; height: 300px; z-index: 50; margin: 0px auto 10px; top: 30px; background: rgb(65,76,170); } .left{ position: absolute; left: 0; width: 400px; height:200px; z-index: 30; float: left; background: rgb(255,224,93); } .right{ position: absolute; right: 0; width: 400px; height:200px; z-index: 30; float: right; background: rgb(92,185,59); } .other{ display: none; } </style> </head> <body> <header></header> <nav></nav> <section> <div id="karusell-slider"> <div id="ks_1" class="front" >Ich bin jetzt front-Klasse</div> <div id="ks_2" class="left" >Ich bin jetzt left-Klasse</div> <div id="ks_4" class="right">Ich bin jetzt right-Klasse</div> </div> <div id="Kontrolle">Kontrolle: </div> </section> <footer></footer> </body> </html> [/html] hier die JS- Datei: [code=JavaScript] $(document).ready(function(){ $(".left").click(function(){ $("#Kontrolle").append("LeftClick; "); rotateRight(); }); $(".right").click(function(){ $("#Kontrolle").append("RightClick; "); }); $(".front").click(function(){ $("#Kontrolle").append("FrontClick; "); }); }); function rotateRight(){ $( ".left" ).animate({ width: "600px", height: "300px", left: "+=180", top: "+=30", }, 500, "swing",function() { $(this).css('z-index', 50); $(this).addClass("front"); $(this).removeClass("left"); $(this).append("Ich bin jetzt "+$(this).attr('class')+"-Klasse"); }); $(".front").animate({ width: "400px", height: "200px", left: "+=380", top: "-=30", },500,function() { $(this).css('z-index', 30); $(this).addClass("right"); $(this).removeClass("front"); $(this).append("Ich bin jetzt "+$(this).attr('class')+"-Klasse"); }); $(".right").animate({ left: "0", },500,"swing",function(){ $(this).css('z-index', 30); $(this).addClass("left"); $(this).removeClass("right"); $(this).append("Ich bin jetzt "+$(this).attr('class')+"-Klasse"); }); } [/code] [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?