为什么这个 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，而是使用可见类来更改图像...最简单的解决方案实际上始终是最好的解决方案：p。谢谢你们的帮助。