Блог

Главная - Вопросы по программированию - Простой jQuery синхронизированный поворот изображения

Простой jQuery синхронизированный поворот изображения

#javascript #jquery #css

#javascript #jquery #css

Вопрос:

По какой-то причине следующее не имеет никакого эффекта. Скорее всего, это результат того, что у меня не было сна, и решение, вероятно, очень простое…

JS: 

 <script src="http://code.jquery.com/jquery-1.6.1.js"> </script>
    <script>
        function swapImages(){
          var $active = $('#switch .active');
          var $next = ($('#switch .active').next().length > 0) ? $('#switch .active').next() : $('#switch img:first');
          $active.fadeOut(function(){
              $active.removeClass('active');
              $next.fadeIn().addClass('active');
          });
        }

        $(document).ready(function(){
          // Run our swapImages() function every 5secs
          setInterval('swapImages()', 5000);
        }
    </script>

HTML:

 <div id="switch"><img src="images/chalk.jpg" class="active" /><img src="images/students.jpg" /></div>

CSS:

 #switch{
    margin-left: auto;
    margin-right: auto;
    width: 996px;
    height: 374px;
}

#switch img{
    display:none;
}

#switch img.active{
    display:block;
}

Ответ №1:

Я создал скрипку, у меня она отлично работает.

Единственное, что я изменил (помимо добавления цветов для целей презентации), это то, что я изменил ваш setInterval вызов на этот:

  setInterval(swapImages, 5000);

Как правило, передача строки в setInterval не является хорошей практикой. Это работает как eval , что, как мы все знаем, является злом :). Передайте ему функцию. Если вы действительно хотите сделать больше, используйте замыкание (в котором здесь нет необходимости).

Ответ №2:

для этого есть плагин 😉

http://jquery.malsup.com/cycle/lite/

это действительно легкий вес и предоставляет несколько приятных опций для анимации для переключения изображений.

Комментарии:

1. Хорошая находка! Хороший плагин, однако он не такой легкий, как то, что я написал … и то, что у меня есть, — это все, что мне нужно, поэтому я хотел бы заставить его работать, если это возможно. Я просто озадачен тем, почему это не работает.

Ответ №3:

Вы пропускаете ); в конце document.ready функции и заменяете setTnterval на фактическую функцию. 

 $(document).ready(function(){
              // Run our swapImages() function every 5secs
              setInterval(swapImages, 1000);
            });

Рабочий пример:http://jsfiddle.net/niklasvh/4d6X5 /