1

как сделать, чтобы отображалась не одна картинка а 3 картинки.

 <html>
    <head>
    <title>Простая замена картинок с помощью JQuery</title>

<style type="text/css">
div#rotator {position:relative; height:150px; margin-left: 15px;}
div#rotator ul li {float:left; position:absolute; list-style: none;}
div#rotator ul li.show {z-index:500;}

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Автор Dylan Wagstaff, http://www.alohatechsupport.net -->
<script type="text/javascript">

function theRotator() {
    // Устанавливаем прозрачность всех картинок в 0
    $('div#rotator ul li').css({opacity: 0.0});

    // Берем первую картинку и показываем ее (по пути включаем полную видимость)
    $('div#rotator ul li:first').css({opacity: 1.0});

    // Вызываем функцию rotate для запуска слайдшоу, 5000 = смена картинок происходит раз в 5 секунд
    setInterval('rotate()',4000);
}

function rotate() { 
    // Берем первую картинку
    var current = ($('div#rotator ul li.show')?  $('div#rotator ul li.show') : $('div#rotator ul li:first'));

    // Берем следующую картинку, когда дойдем до последней начинаем с начала
    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));

    //  чтобы показвать картинки в случайном порядке
     var sibs = current.siblings();
     var rndNum = Math.floor(Math.random() * sibs.length );
     var next = $( sibs[ rndNum ] );

    // Подключаем эффект растворения/затухания для показа картинок, css-класс show имеет больший z-index
    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);

    // Прячем текущую картинку
    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');
};

$(document).ready(function() {      
    // Запускаем слайдшоу
    theRotator();
});

</script>

</head>
<body>

<div id="rotator">
  <ul>
    <li class="show"><a href="img/1.jpg" title="Image 1"><img src="img/1.jpg" width="500" height="325"  alt="pic1" /></a></li>
    <li><a href="img/2.jpg" title="Image 2"><img src="img/2.jpg" width="500" height="325"  alt="pic2" /></a></li>
    <li><a href="img/3.jpg" title="Image 3"><img src="img/3.jpg" width="500" height="325"  alt="pic3" /></a></li>
    <li><a href="img/4.jpg" title="Image 4"><img src="img/4.jpg" width="500" height="325"  alt="pic3" /></a></li>
    <li><a href="img/5.jpg" title="Image 5"><img src="img/5.jpg" width="500" height="325"  alt="pic3" /></a></li>
    <li><a href="img/6.jpg" title="Image 6"><img src="img/6.jpg" width="500" height="325"  alt="pic3" /></a></li>
    <li><a href="img/7.jpg" title="Image 7"><img src="img/7.jpg" width="500" height="325"  alt="pic3" /></a></li>
    <li><a href="img/8.jpg" title="Image 8"><img src="img/8.jpg" width="500" height="325"  alt="pic3" /></a></li>
    <li><a href="img/9.jpg" title="Image 9"><img src="img/9.jpg" width="500" height="325"  alt="pic3" /></a></li>
    <li><a href="img/10.jpg" title="Image 10"><img src="img/10.jpg" width="500" height="325"  alt="pic3" /></a></li>
  </ul>
</div>

</body>
</html>
6
  • три картинки из этого же списка или три разных списка картинок на одной странице?
    – beardog
    10 мар 2012 в 13:10
  • из этого списка, т.е. есть 10 картинок и 3 из них в рендомном порядке должны меняться
    – kira
    10 мар 2012 в 13:12
  • и еще, есть какая-то причина, по которой не используются методы fadeIn/fadeOut? Они вроде выглядят так же, но работать с ними проще
    – beardog
    10 мар 2012 в 13:14
  • я просто не знаю как сделать)
    – kira
    10 мар 2012 в 13:21
  • Что сделать?
    – Oleg
    10 мар 2012 в 13:32

1 ответ 1

2

Я бы все-таки использовал fadeIn/Out для скрывания, тогда не нужно никаких лишних игр с прозрачностью и z-индексом. И стили для rotator не понадобятся

Инициализация: function theRotator() { // Прячем все элементы списка $('div#rotator ul li').hide();

  // Показываем первых три элемента списка 
  $('div#rotator ul li:lt(3)').fadeIn();

  // Вызываем функцию rotate для запуска слайдшоу
  setInterval('rotate()',3000);
}

Работа:

function rotate() {
  var notForNow = [] ; //в этот массив сложим адреса текущих видимых картинок
                       //и тех, что будем показывать, чтобы избежать дублирования
  $('div#rotator ul li:visible') // отбираем видимые картинки
    .each(function(idx, el) { // запоминаем адрес каждой
      var $el = $(el);
      var imgsrc = $el.find('img').eq(0).attr('src');
      notForNow.push(imgsrc); 
    }) ;

  //выбираем новые три
  var stop = false;
  var toShow = [] ;
  var $li = $('div#rotator ul li');
  while(toShow.length<3) {
    var rndNum = Math.floor(Math.random() * $li.length );
    var imgsrc = $li.eq(rndNum).find('img').eq(0).attr('src');
    if (notForNow.indexOf(imgsrc)===-1) {
      notForNow.push(imgsrc);
      toShow.push(rndNum) ;
    }
  }

  // снова отбираем видимые элементы и прячем их
  $('div#'+divname+' ul li:visible').fadeOut('slow',function() {
    // эта функция будет вызвана, когда элементы исчезнут

    $li.filter(function(idx){ // отфильтровываем те, что мы хотели показать
      return (toShow.indexOf(idx)!=-1) ;
    }).fadeIn('slow'); // и показываем
  })

Вот здесь полный текст http://pastebin.ru/JgndKfog

Update: в первоначальном варианте анимация получалась довольно глючной на вид. Надо было показывать новые картинки только после того, как исчезнут старые. Но все равно на долю секунды страница дергается; чтобы этого не было, нужно жестко задать высоту для div

1
  • спасибо, все работает!
    – kira
    11 мар 2012 в 18:19

Ваш ответ

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

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