爲什麼這個jQuery代碼只能在FireFox中工作？

Question

我一直在使用jQuery編寫的分頁小部件存在一些問題。基本上，當幻燈片切換圖像和標題時，分頁移動會沿着一個指示器移動。該代碼在FireFox中完美工作，但不在Chrome，IE，Opera中運行。這裏是jQuery。

function autoSlideshow(mode) { 
     var currentImage = $('#gallery li.visible');          //Determine which slide is visible 
     var currentCaption = $('#caption li.visible'); 
     var currentSlide = $('#controls a.pagination.visible');  

     if(mode == -1){ 
      var nextImage = currentImage.next().length ? currentImage.next() :    //Determine the next slide 
         currentImage.siblings(':first');   
      var nextCaption = currentCaption.next().length ? currentCaption.next() :   
         currentCaption.siblings(':first'); 
      var nextSlide = currentSlide.next().length ? currentSlide.next() :   
         currentSlide.siblings(':eq(1)'); 
     } 
     else{ 
      var nextImage = $('#gallery li:eq('+mode+')'); 
      var nextCaption = $('#caption li:eq('+mode+')'); 
      var nextSlide = $('#controls a.pagination:eq('+mode+')'); 
     } 

     currentImage.fadeOut(250).removeClass('visible'); 
     nextImage.fadeIn(250).addClass('visible'); 
     currentCaption.fadeOut(250).removeClass('visible'); 
     nextCaption.fadeIn(250).addClass('visible'); 
     currentSlide.css('background-image','url(images/controls/page.png').removeClass('visible'); 
     nextSlide.css('background-image','url(images/controls/current.png').addClass('visible'); 

    } 

這裏是html的配合。

<div id="slideshow"> 
      <ul id="gallery"> 
       <li><img src="images/slideshow/waves.png" alt="Sunset"/></li> 
       <li><img src="images/slideshow/whale.jpg" alt="Whale" /></li> 
       <li><img src="images/slideshow/maldives.jpg" alt="Maldives" /></li> 
       <li><img src="images/slideshow/birdflock.jpg" alt="Flock of Birds" /></li> 
       <li><img src="images/slideshow/bugatti.jpg" alt="Bugattis" /></li> 
       <li><img src="images/slideshow/dumbanddumber.jpg" alt="Dumb and Dumber" /></li> 
      </ul> 
      <ul id="caption"> 
       <li class="visible"> 
        <h2>Stuff!!</h2> 
        <p> 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel magna purus. Suspendisse porttitor velit id leo 
         bibendum ac commodo odio tincidunt. 
        </p> 
        <a href="#" class="button">Let's Go</a> 
       </li> 
       <li> 
        <h2>More Stuff</h2> 
        <p> 
         Suspendisse id libero vel neque faucibus blandit et in eros.Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
         Integer vel magna purus. 
        </p> 
        <a href="#" class="button">Let's Go</a> 
       </li> 
       <li> 
        <h2>Benefits of Stuff</h2> 
        <p> 
         Sed hendrerit, quam et hendrerit faucibus, mauris arcu ultrices erat, ac placerat risus nulla nec risus. 
         Lorem ipsum dolor sit amet. 
        </p> 
        <a href="#" class="button">Let's Go</a> 
       </li> 
       <li> 
        <h2>Other Stuff</h2> 
        <p> 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel magna purus. Suspendisse porttitor velit id leo 
         bibendum ac commodo odio tincidunt. 
        </p> 
        <a href="#" class="button">Let's Go</a> 
       </li> 
       <li> 
        <h2>Interresting Stuff</h2> 
        <p> 
         Sed hendrerit, quam et hendrerit faucibus, mauris arcu ultrices erat, ac placerat risus nulla nec risus. 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        </p> 
        <a href="#" class="button">Let's Go</a> 
       </li> 
       <li> 
        <h2>Heading</h2> 
        <p> 
         Suspendisse id libero vel neque faucibus blandit et in eros.Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
         Integer vel magna purus. 
        </p> 
        <a href="#" class="button">Let's Go</a> 
       </li> 

      </ul> 
      <ul id="controls"> 
       <a href="#" class="playpause"></a> 
       <a href="#" class="pagination"></a> 
       <a href="#" class="pagination"></a> 
       <a href="#" class="pagination"></a> 
       <a href="#" class="pagination"></a> 
       <a href="#" class="pagination"></a> 
       <a href="#" class="pagination"></a>      
      </ul> 

有一個/ div結束幻燈片div，但我懶得重複它：p。感謝所有幫助傢伙！

莫

Answer 1

好吧我想通了。我不是直接改變CSS，而是使用可見類來改變圖像......最簡單的解決方案總是最好的解決方案：p。謝謝你們的幫助。

Answer 2

你有正在發生，但Firefox不關心它，繼續前進，但其他瀏覽器都停止在其上的JavaScript錯誤？