0

我已經實現了一個使用Cycle插件的幻燈片,它可以在除IE6以外的所有瀏覽器中工作,其中圖像只顯示在列表中,#page_copy div不隱藏。我整天都在閱讀代碼,沒有任何運氣,也不完全確定我應該如何或者應該尋找什麼。jQuery Cycle插件IE6/7問題

什麼是最好的方式去調試這個問題?我知道,當我刪除代碼的其餘部分#page_copy DIV是隱藏的,我一直在嘗試,反向(其中有沒有結果)

<script type="text/javascript" charset="utf-8"> 
     jQuery.fn.fadeToggle = function(speed, easing, callback) { 
      return this.animate({opacity: 'toggle'}, speed, easing, callback); 
     }; 


     $(document).ready(function() { 
      $('#page_copy').hide(); 
      $('a#info_close_button').click(function() { 
       $('#page_copy').fadeOut(200); 
       return false; 
      }); 
      $('a#info_button').click(function() { 
       $('#page_copy').fadeToggle(200); 
       return false; 
      }); 
     }); 


     $(window).load(function() { 
      // vertically center single image 
      var $image_cnt = $("#images > img").size(); 
      if($image_cnt < 2) { 
       var $single_img = $("#images").children(':first-child'); 
       var h = $single_img.height(); 
       $single_img.css({ 
        marginTop: (620 - h)/2, 
       }); 
       $(".next").css("display","none"); 
       $(".prev").css("display","none"); 
      } 
     }); 


     // wait until images have loaded before starting cycle 
     $(window).load(function() { 
      // front image rotator 
      $('#images').cycle({ 
       fx: 'fade', 
       speed: 300, 
       next: '.next', 
       prev: '.prev', 
       containerResize: 0, 
       timeout: 0, 
       delay: -2000, 
       before: onBefore 
      }); 

     }); 

     // hide all but the first image when page loads 
     $(document).ready(function() { 
      $('#images img:gt(0)').hide(); 
     }); 

     // callback fired when each slide transition begins 
     function onBefore(curr,next,opts) { 
      var $slide = $(next); 
      var w = $slide.width(); 
      var h = $slide.height(); 
      $slide.css({ 
       marginTop: (620 - h)/2, 
       marginLeft: (650 - w)/2 
      }); 
     }; 
    </script> 

回答

1

我真的不明白爲什麼你有多個$(document).ready$(window).load ..

也許您應該嘗試將所有內容放在一個單獨的$(document).ready區塊中。

此外,在<script>標記的最開始處移動function onBefore(...)的定義。直接在jQuery.fn.fadeToggle之前的代碼。

嘗試也是在這個一段代碼

$single_img.css({ 
    marginTop: (620 - h)/2, //<---- remove comma 
}); 

的端部除去不需要的逗號並且還刪除該不需要的分號

function onBefore(curr,next,opts) {...}; //<--- unneeded 
+0

感謝提示抖動。我刪除了逗號和分號,並將所有代碼移到了一個$(document).ready和一個$(window).load中,但仍然有相同的問題。需要兩者都是,否則圖像大小不及時評估,如果一切都在doc.ready – 2010-03-29 08:48:12

+0

是的,這是逗號!謝謝抖動。 – 2010-03-29 10:09:42