Почему мой код слайдшоу jquery не работает? - PullRequest
Новая
       22

Почему мой код слайдшоу jquery не работает?

0 голосов
/ 19 марта 2010

У меня есть три изображения, которые отображаются и оформляются следующим образом: 

<img id="img1" src="images/category_slideshow/yellow-viper-on-car-ramps.jpg" alt="Yellow Viper on Race Ramps Car Ramps" width="557" height="415" /> 
        <img class="onBottom" src="" width="557" height="415" />  
        <img class="onTop" src="" width="557" height="415" /> 

.onBottom{
  position:absolute;
  margin-top:-415px;
  background:url(../images/category_slideshow/loading.gif) center no-repeat;
}

.onTop{
  position:absolute;
  margin-top:-415px;
  background:url(../images/category_slideshow/loading.gif) center no-repeat;
}

Вот мой Javascript: 

  $(document).ready(function() {

    var productImages = new Array();
    productImages["raceramps56"] = "images/category_slideshow/black-350z-on-car-ramps.jpg";
    productImages["raceramps67"] = "images/category_slideshow/red-corvette-on-car-ramps.jpg";
    productImages["xtenders"] = "images/category_slideshow/silver-sti-on-xtenders.jpg";
    productImages["sportramps"] = "images/category_slideshow/black-corvete-on-car-ramps.jpg";
    productImages["rollups"] = "images/category_slideshow/yellow-lotus-on-rollups-for-car-ramps.jpg";


    $(".onTop, .onBottom").css("opacity", "0");   //Give the two images 0 opacity

    $( '.leftMenuProductButton' ).hover ( 
      function () {                         
        //.leftMenuProductButton is a button in a menu.
        // There are several of these buttons, each button
        // has an ID such as "raceramps56" or "xtenders"

        var swapIMG = $(this).attr("id");  //This gets the ID, such as "raceramps56" or "xtenders"

        $(".onTop").css({opacity: '0', 'z-index': '3'})
          .attr("src", productImages[swapIMG])
          .load(function() {
            //This takes the first IMG, make it invsisbile,
            // brings it to the top, replaces it's SRC image
            // with the variable, then once it is loaded, it fades in.
             $(this).fadeTo(300, 1);
          })
          .removeClass("onTop")
          .addClass("replaceMe"); // This removes the class "onTop and replaces it with "replaceMe". I can't simply change onTop to onBottom yet, as I need to reference onBottom later.

         $(".onBottom").addClass("onTop").removeClass("onBottom").css({'z-index': '1'});  // This converts onTop to onBottom, and puts it at the bottom. 

         $(".replaceMe").removeClass("replaceMe").addClass("onBottom"); //Now that I no longer have an onBottom, I can replace replaceMe with onBottom

      },
      function () {
        //does nothing right now

      });
   });

Этот код работает довольно хорошо. Однако, если я наведу курсор мыши на .leftMenuProductButton, затем перейду к другой .leftMenuProductButton, а затем переместлюсь вперед и назад между ними, он будет работать неправильно.

Вы можете посмотреть пример на www.raceramps.com/v3.

1 Ответ

1 голос
/ 19 марта 2010

хм, ладно, я бы изменил 2 вещи, прежде всего попробуйте изменить 

$(".onTop").css({opacity: '0', 'z-index': '3'}).attr("src",productImages[swapIMG]).load(function() {
             $(this).fadeTo(300, 1, function(){
    $(this).removeClass("onTop").addClass("replaceMe");
});

});

таким образом, он не будет удалять класс до тех пор, пока он полностью не исчезнет. Если вы зафиксируете .removeClass, как вы это сделали, он будет немедленно запущен после завершения LOAD, а не замирания.

секунду я бы остановил все анимации перед началом новой, попробуйте добавить 

$(".onTop").stop();

поверх вашей функции зависания

...