Hallo JS-Family,
ich habe mal wieder ein kleines Problem mit jQuery und dem wechseln von Hintergrundbildern.
hier mal mein CSS Code
Probleme sind:
wenn man die Reihe nach die Bilder im Slider anklickt, dann funktioniert es. Aber wenn man dann wieder zurück oder durch einander die Bilder anklickt, dann das Hintergrundbild nicht geladen.
Auf das Logo habe ich das Script für das Zurücksetzen des Hintergrundbildes gelegt.
Auf meiner Webseite http://www.webslay.de könnt Ihr das Problem euch anschauen.
ich habe mal wieder ein kleines Problem mit jQuery und dem wechseln von Hintergrundbildern.
hier mal mein CSS Code
CSS:
.headslider {margin:0;padding:0;width:100%;height:552px;background-image:url(../../img/headslider/header_pic_01.jpg);background-repeat:no-repeat;background-position:center top;}
.headslider0 {margin:0;padding:0;width:100%;height:552px;background-image:url(../../img/headslider/header_pic_02.jpg);background-repeat:no-repeat;background-position:center top;}
.headslider1 {margin:0;padding:0;width:100%;height:552px;background-image:url(../../img/headslider/header_pic_03.jpg);background-repeat:no-repeat;background-position:center top;}
.headslider2 {margin:0;padding:0;width:100%;height:552px;background-image:url(../../img/headslider/header_pic_04.jpg);background-repeat:no-repeat;background-position:center top;}
.headslider3 {margin:0;padding:0;width:100%;height:552px;background-image:url(../../img/headslider/header_pic_05.jpg);background-repeat:no-repeat;background-position:center top;}
Javascript:
$('.imageclick').click(function() {
var picNo = $(this).attr('id');
//alert(picNo);
$('#header').addClass('headslider'+ picNo);
});
$('.logo').click(function() {
$('#header').addClass('headslider');
});
HTML:
<div id="header" class="headslider"></div>
<div class="header">
<div class="logo"></div>
<div class="miniSlider opacity75 radius24">
<div class="smallSlider_show">
<div class="smallSlider_control">
<div class="control_left">«</div>
<div class="control_right">»</div>
</div>
<div class="pos_smallSliderBox">
<div class="smallSlider_box">
<!-- Start Pic 01 //-->
<div class="smallSlider_img">
<img src="img/headslider/mini_slider_head/mini_slider_pic01.png" width="123" height="90" alt="webslay.de - Webdesign und Layout - Bildslider" title="webslay.de - Webdesign und Layout - Bildslider" border="0" id="0" class="imageclick" />
</div>
<!-- End Pic 01 //-->
<!-- Start Pic 02 //-->
<div class="smallSlider_img">
<img src="img/headslider/mini_slider_head/mini_slider_pic02.png" width="123" height="90" alt="webslay.de - Webdesign und Layout - Bildslider" title="webslay.de - Webdesign und Layout - Bildslider" border="0" id="1" class="imageclick" />
</div>
<!-- End Pic 02 //-->
usw....
</div>
</div>
</div>
</div>
Probleme sind:
wenn man die Reihe nach die Bilder im Slider anklickt, dann funktioniert es. Aber wenn man dann wieder zurück oder durch einander die Bilder anklickt, dann das Hintergrundbild nicht geladen.
Auf das Logo habe ich das Script für das Zurücksetzen des Hintergrundbildes gelegt.
Auf meiner Webseite http://www.webslay.de könnt Ihr das Problem euch anschauen.
Zuletzt bearbeitet von einem Moderator: