почему этот код jQuery работает только в FireFox? - PullRequest
Новая
       6

почему этот код jQuery работает только в FireFox?

0 голосов
/ 11 августа 2010

У меня были некоторые проблемы с виджетом нумерации страниц, который я написал в 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, но мне было лень его переписывать: с. Спасибо за помощь, ребята!

Мо

Ответы [ 2 ]

0 голосов
/ 12 августа 2010

хорошо, я понял это. Вместо непосредственного изменения CSS я просто использовал видимый класс, чтобы изменить изображение ... самое простое решение - всегда лучшее решение: с. Спасибо за вашу помощь, ребята.

0 голосов
/ 11 августа 2010

Есть ли у вас ошибка javascript, которая возникает, но Firefox не заботится об этом и движется дальше, но другие браузеры останавливаются на ней?

...