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。谢谢你的帮助。

为什么这个jQuery代码只能在FireFox中使用？

2 个答案: