为什么此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

您是否正在发生JavaScript错误，但是firefox不在乎它并继续运行，但其他浏览器正在停止该错误？

Answer 2

好吧，我知道了。 我没有直接更改css，而是使用visible类来更改图像...最简单的解决方案实际上始终是最好的解决方案：p。 感谢您的帮助。