Hallo!
Ich habe einen Contentslider. Da ich das Thema habe, wenn ich nicht allen Sliderelementen eigene Namen zuweise sich immer alle Objekte bewegen habe ich das ganze nun einmal separiert. So funktioniert es für beide Objekte:
JS:
HTML:
Wie kann ich daraus ein JS-machen? Da es einige Sliderobjekte auf der Seite sein sollen...
Danke und Grüße
Ich habe einen Contentslider. Da ich das Thema habe, wenn ich nicht allen Sliderelementen eigene Namen zuweise sich immer alle Objekte bewegen habe ich das ganze nun einmal separiert. So funktioniert es für beide Objekte:
JS:
Code:
<script type="text/JavaScript"> $(document).ready(function (){ $('#button a').click(function(){ var integer = $(this).attr('rel'); $('#myslide .cover').animate({left:-160*(parseInt(integer)-1)}) /*----- Width of div mystuff (here 160) ------ */ $('#button a').each(function(){ $(this).removeClass('active'); if($(this).hasClass('button'+integer)){ $(this).addClass('active')} }); }); }); </script> <script type="text/JavaScript"> $(document).ready(function (){ $('#button1 a').click(function(){ var integer = $(this).attr('rel'); $('#myslide1 .cover1').animate({left:-160*(parseInt(integer)-1)}) /*----- Width of div mystuff (here 160) ------ */ $('#button1 a').each(function(){ $(this).removeClass('active'); if($(this).hasClass('button1'+integer)){ $(this).addClass('active')} }); }); }); </script>
HTML Code:
<div id="button"> <a class="button1 active" rel="1" href="#"></a> <a class="button2" rel="2" href="#"></a> <a class="button3" rel="3" href="#"></a> </div> <div id="myslide"> <div class="cover"> <div class="mystuff"> Lorem ipsum </div> <div class="mystuff"> Aenean scelerisque </div> <div class="mystuff"> Suspendisse </div> </div> <!-- end of div cover --> </div> <!-- end of div myslide --> <div id="button1"> <a class="button1 active" rel="1" href="#"></a> <a class="button2" rel="2" href="#"></a> </div> <div class="clear"></div> <div id="myslide1"> <div class="cover1"> <div class="mystuff1"> LXorem ipsum </div> <div class="mystuff1"> AXenean scelerisque </div> </div> <!-- end of div cover1 --> </div> <!-- end of div myslide1 -->
Danke und Grüße
Comment