0

Есть файл styles.css и исполняемый блок:

<div id="slideShowContainer">
    <div id="slideShow">
        <div id="pictures">
            <img src="img/photos/picture1.png" alt="" />
            <img src="img/photos/picture2.png" alt="" />
            <img src="img/photos/picture3.png" alt="" />
            <img src="img/photos/picture4.png" alt="" />
            <img src="img/photos/picture5.png" alt="" />
        </div>
    </div>
    <a id="previousLink" href="#">&raquo;</a>
    <a id="nextLink" href="#">&laquo;</a>
</div>

        </div>

1 работает на странице, 2 не работают на странице.

Вопрос Что нужно изменить что бы работали 2 и 3 и т.д. блоки на одной странице?

Скрипт
/ Действия выполняются после загрузки DOM
$(document).ready(function() {

  var z = 0;                // Переменная для хранения значения свойства z-index
  var inAnimation = false;  // Флаг, сигнализирующий о выполнении анимации

  $('#pictures img').each(function() {      // Устанавливаем начальные значения свойства z-index
    z++;                                // В перменной будет храниться максимальное значение свойства z-index
    $(this).css('z-index', z);          // Присваиваем увеличенное значение свойства z-index для <img>
  });

  function swapFirstLast(isFirst) {

    if(inAnimation) return false;       // Если уже выполняется анимация, то прерываем дальнейшее выполнение функции
    else inAnimation = true;            // Устанавливаем флаг, сигнализирующий о выполенении анимации

    var processZindex, direction, newZindex, inDeCrease; // Переменные для технических нужд

    if(isFirst) { processZindex = z; direction = '-'; newZindex = 1; inDeCrease = 1; }  // Устанавливаем перменные для действия "следующий"
    else { processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1; }         // Устанавливаем перменные для действия "предыдущий"

    $('#pictures img').each(function() {                // Цикл по всем изображениям

      if($(this).css('z-index') == processZindex) {     // Проверяем, нужно ли обрабатывать изображение

        // Анимируем перемещение изображения над/под галереей (предполагается, что все изображения имеют одинаковую высоту)
        $(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow', function() { 
          $(this).css('z-index', newZindex)                 // Устанавливаем новое значение свойства z-index
            .animate({ 'top' : '0' }, 'slow', function() {  // Анимируем движение изображения обратно на свое место
              inAnimation = false;                          // Сбрасываем флаг
            });
        });
      } else {  // Нет изображений для обработки, нужно только увеличть/уменьшить значение свойства z-index
        $(this).animate({ 'top' : '0' }, 'slow', function() {                       
          $(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease);    // Увеличиваем или уменьшаем значение свойства z-index
        });
      }
    });

    return false; // Прерываем дальнейшую обработку события
  }

  $('#previousLink').click(function() {
    return swapFirstLast(false);    // Переводим первое изображение на последнюю позицию
  });

  $('#nextLink').click(function() {
    return swapFirstLast(true);     // Переводим последнее изображение на первую позицию
  });
});
2
  • 1
    А причем тут Java?! Может сначала научимся отделять Java от JavaScript?
    – Barmaley
    2 дек 2012 в 18:44
  • Выскочила подсказка нажал - не заметил!
    – Greg888
    2 дек 2012 в 20:27

1 ответ 1

1

Вместо id-шников , поставьте в соответствующих блоках классы, и измените селектор.

<div class="pictures">
   //
</div>
<a class="previousLink" href="#">&raquo;</a>
<a class="nextLink" href="#">&laquo;</a>
// и т.д.

JS

$('.pictures img')
$('.previousLink')
$('.nextLink')

P.S. Кстати, часок назад, уже обсуждалась похожая проблема. Гляньте этот вопрос, возможно, что будет полезен.

1
  • Спасибо, Deonis !!!
    – Greg888
    2 дек 2012 в 20:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.