Ротатор картинок (изображений)

jQuery ротатор

Довелось мне повозиться с сайтом бутика «Кабуки». На главной странице используется интересная вещь, а главное для бутика, как мне кажется, совсем удачное решение – ротатор изображений. Вот только беда в том, что выглядит и работает все хорошо, как ни странно, только в IE. Поковырявшись в дебрях кода, решил написать свой ротатор картинок. В «демо» можно увидеть результат того, что получилось. А просмотрев видео, можно научиться делать самому ротатор картинок.

скачать исходникискачать урокдемо

Надеюсь данный урок по созданию своего ротатора изображений (картинок), для сайта вам понравился. С уважение команда WebForMySelf.

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки: ,

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

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

Комментарии (51)

  1. Антон

    Спасибо за урок. Все хорошо, но можно ли поставить ссылки на каждое изображение? Будет ли работать во всех браузерах?
    И было бы просто замечательно!

    • Andrey Bernacki

      Антон, можно так сделать. Вешаете ссылки на ваши изображения и при клике на каждое изображение будет открываться новая страница. Единственный совет, сделаете так чтобы каждая страница открывалась при этом в новом окне. То есть пользователь кликает по ссылке, она открывается в новом окне, а ротатор продолжает работать в своем окне, и его видит пользователь.

  2. alex

    а он тока на картинках работает или с текстом тоже?
    фишка в том, что есть описание продукта(цена и картинка). нужно чтоб выводилось по 3 картинки + текст в ряд и они сменяли друг друга ч/з определенное время. соответственно вывод данных идет из БД.

    • Andrey Bernacki

      alex, работает не только на картинках. Мы же скрываем и показываем целый блок div. поэтому то что лежит внутри него не важно. Единственное нужно применить некоторые стили.
      Например в любой из div-ов помести такой код:
      <p style=’color:#FF0000; font:bold 18px; width:160px; height:120px; background:#000; padding:0; margin:0;’>TEXT</p>
      увидим следующее:

      TEXT

      width:160px; height:120px; — такие же как и у родительского блока;
      background:#000; — цвет окружающего фона (у меня он черный);
      padding:0; margin:0; — это не нужно, если используешь сброс стилей для всей страницы.

      Прием такой использовать можно. Далее текст в теге можете сделать аккуратнее с помощью стилей.

      • alex

        попробовал для таблицы сделать, но не работает!!!
        вот тут делал изменения

        $(function(){
        setInterval(«rotateImages()», 2000);
        });
        function rotateImages(){
        var oCurPhoto = $(«#photo tr.current»);
        var oNxtPhoto = oCurPhoto.next();
        if(oNxtPhoto.length == 0)
        oNxtPhoto = $(«#photo tr:first»);

        oCurPhoto.removeClass(‘current’).addClass(‘previous’);
        oNxtPhoto.css({opacity: 0.0}).addClass(‘current’).animate({opacity: 1.0}, 1000,
        function(){
        oCurPhoto.removeClass(‘previous’);
        });
        }

      • alex

        уже разобрался….

      • Жанна

        У меня при попытке добавить вместо картинок текст, появляется такая картина: текст накладывается друг на друга.

        • Andrey Bernacki

          Для того, чтобы не накладывался текст, нужно добавить фон. Добавьте к дивам в файле стилей например черный фон и все будет так как вам нужно. Где-то в комментариях я про это уже рассказывал.

  3. sergey

    посмотрел пример — интересная вещь, сейчас посмотрю урок. Однако вспомнил старый (лет 10 ему) скрипт. Работает почти так-же, но на 2 порядка короче.

    • Andrey Bernacki

      sergey, не то чтобы он короче. По размеру да, скрипт конечно меньше. Но в моем уроке набирать руками придется всего 15 строк javaScript кода, а остальное сделает jQuery. Мое мнение такое, то что работает одинаково хорошо везде — имеет право на жизнь, и не важно 10 лет или 2 дня со дня рождения скрипта. А то что скрипту лет уже много — это и так видно )))

  4. Юлия

    Ну ничего не понятно. Какие уровни, какие индексы и что всё это обозначает? Слова какие-то непонятные. У Вас есть видео для чайников?

  5. Ольга

    Класс! Спасибо, Андрей. Только вопрос — а можно ли это реализовать на джумле? Было бы вообще замечательно, если бы Вы рассказывали, как Ваши уроки применять на этом движке — вот как я размечталась ))))))

    • alex

      Оль, а компоненты и модули вы умеете писать для joomla?
      это можно реализовать на joomla!
      100%

  6. Петр

    Спасибо, за урок, но у меня сайт на движке WP. Не понятно как это подключить.

  7. Андрей

    Очень полезные уроки, мне очень нравятся! Я учусь создавать своими руками сайты, и это то, что необходимо! Большое спасибо тебе Андрей, за предаставленные материалы, не так-то просто найти такого рода инфу в интернете!!!

  8. Галина

    Спасибо за урок! Все очень понятно и доходчиво объяснено!
    Даже не ожидала!
    Теперь попробую применить.

  9. Tanuxa

    Андрей Бернацкий, спасибо Вам за урок!!!
    Я сама от себя не ожидала что у меня всё получиться. Очень помогли исходники, с их помощью нашла свои ошибки. Урок получился — всё работает!!! :)
    Спасибо!!!

  10. Дмитрий Париев

    Да, действительно, как на вордпресс поставить?

  11. Маргарита

    Андрей спасибо за ваши уроки. Очень во время и просто. Использую их на своих уроках.

  12. Юрий

    Спасибо, Андрей!

    17:17:
    div.previous (z-index:1) встал на один уровень со всеми…
    как я понял, все остальные всё же на z-index:0, правильно?

    Успехов тебе!

    • Andrey Bernacki

      Юрий, да, все блоки имеют z-index:0. Тот который виден сейчас имеет z-index:2, затем ему присваивается z-index:1, а следующему блоку z-index:2, и идут анимация с прозрачностью.

  13. Юрий

    действительно интересно.

  14. Maks

    a nelzya vilozhiit vse video na youtube.com ???

    etot rutube takoi gluchniy, hotel perekrutit, i prishlos zhdat buferizaciu s samogo nachala, delo v tom, shto u menya skorotst 128 kb/s. P. S. : eto ne gluk bowsera

  15. Владимир

    ГОСПОДА!
    В SWISH Max-се это делается за две минутки.
    Без всяких кодов. Отсюда вопрос: в чём фишка?
    А за уроки спасибо.

  16. Ольга

    Здорово! Спасибо! Но есть проблемка: поставила ротатор картинок в ячейку таблицы, в которой все выровнено по центру. И в Опере, и в Мозилле показывает нормально, а в IE не могу выровнять по центру ячейки (картинки прилипли к правому борту). Не подскажете, как спозиционировать элемент?

    • Andrey Bernacki

      Ольга, назначил для ячейки align=’center’ и во всех браузерах работает хорошо. Сразу даже вопроса не понял. Потом посмотрел в старых версиях IE — там действительно есть небольшая проблема с выравниванием. Решил ее так:

      1. Обернул div id=»photo» (то есть главный блок) еще в один div.
      2. Для него (нового div-a — обертки) назначил следующие стили: position:relative; width:164px; height:124px; margin:0 auto;
      3. Наслаждаюсь работой скрипта во всех браузерах))))

      P.S. width:164px; height:124px; — для поправки размера. То есть, у нас div id=»photo» имеет размеры: width:160px; height:120px; и плюс рамка с каждой стороны 2px. и нам рамку нужно учесть и прибавить ее размеры к размерам обертки.

      Экспериментируйте, Удачи!

      • Евгений

        Здравствуйте, Андрей! Я установил ротатор на свой блог, но он крутится лишь на моем ноутбуке и лишь в брузере Mozilla Firefox.
        На других компьютерах (родственники, друзья) в этом браузере открывается лишь альтернативные названия фотографий.
        На Опере и IE открывается вертикальная колода всех рамок (без изображений фотографий) с альтернативным текстом.

        Очень заинтересовало это решение проблемы, но у «чайника» нет достаточных знаний для создания нового div — а и стилей для него.
        Пришлите текст готового решения установки «Обертки» и назначения для нее стилей. Как обозвать этот div и и связать со стилями для него, и как в header php прописать путь к нему?

  17. alex

    Я только начинаю-учусь-на WordPress-буду благодарен за любую помощь…………………………

  18. Андрей

    Большое спасибо! У меня все получилось, работает на ура!
    Только есть один маленький вопросик, у меня в Firefox-е, в консоле Firebug 1.5.4 пишет:
    Ошибка при анализе значения «opacity». Потерянное объявление.
    и Неизвестный псевдокласс или псевдоэлемент «first».
    Это нормально или я что-то не так сделал?
    Скрипт набирал руками, сравнил со скаченным файлом, вроде все правильно.

  19. Наталья

    Доброго времени суток!
    Если просто слушать и смотреть — все замечательно! Но для того, чтобы еще и понятно было — надо как минимум, пройти какие-нибудь компьютерные курсы. А для таких «чайников» типа меня — это темный лес. Одних терминов тьма тьмущая, а что они значат…???
    Было бы хорошо, если бы для «чайников» более развернутые объяснения сделать. Да и словарь профессиональных терминов не помешало бы иметь при этом.
    С уважением, Наталья

  20. Ольга

    А как эту отличную «штуку» прикрутить к ВордПрессу???

  21. Татьяна

    Спасибо!!!
    Ставила другой слайдер, он во всех браузерах показывается кроме IE. Мучалась, мучалась, пыталась с ним справиться, — плюнула. А тут очень ко времени ваш ротатор оказался. Работает — без проблем!

  22. Роман

    Здраствуйте, Андрей. Спасибо за урок все получилось, токо вот у меня вышла загвоздка с размещением ротатора(позиция на странице). Хотел разместить по средине так прописал самому верхнему div align=»center», а оно нече не изменилось(вся работа проводиться в файлах с архива). В style.css #photo прописал margin-left:50px заработало. Можно конечно и просто прописать margin, но оно будет не то, и когда просто подбирать значения по отступам. А как чтоб «все и сразу» по центру было. Может что-то не то делаю?

  23. Олег

    Андрей, а возможно ли сделать, чтоб рядом с ротатором картин, выходило описание по каждой фото, и как.
    А как можно сделать, чтоб ротатор работал чуть медленней, чтоб человек успевал рассмотреть фото.

    Попытался вставить этот код в ротатор между div,

    ( div>
    Набережная, вид на море.

    /div>)

    Отправляю код повторно, а то куда то пропал,
    Но, что то наверное неправильно понял, получилось совсем не то, что у вас в примере.

  24. ЖЕКА

    У меня такая проблема все получилось только в шапку не могу поставить ротатор он у меня поверх сайта ложиться и все..=( что делать?

  25. Aleks

    Спасибо тебе дружище! как раз весь инет перерыл в поисках такого слайдера надо было зусунуть его под прозрачную png и подогнать по размерам!Очень выручил!

  26. Светлана

    Андрей, cпасибо большое за урок. Всё понятно и наглядно изложено. Вот только есть одна загвоздка. При попытке вывести два ротатора на одной странице, второй ротатор проигрывает изображения до последнего и останавливается, при том что первый продолжает работать. Почему так происходит, и как это исправить?

    • Andrey Bernacki

      продублируйте строку setInterval(«rotateImages()», 2000); с другим названием например setInterval(«rotateImages2()», 2000);
      Соответственно и сама функция тоже поменяется:
      function rotateImages2(){
      var oCurPhoto = $(«#photo2 div.current»); ВНИА$(«#photo2 div.current»);МАНИЕ тут было $(«#photo div.current»);
      var oNxtPhoto = oCurPhoto.next();
      if(oNxtPhoto.length == 0)
      oNxtPhoto = $(«#photo div:first»);

      oCurPhoto.removeClass(‘current’).addClass(‘previous’);
      oNxtPhoto.css({opacity: 0.0}).addClass(‘current’).animate({opacity: 1.0}, 1000,
      function(){
      oCurPhoto.removeClass(‘previous’);
      });
      }

      и в самом HTML коде поменяйте на

      Попробуйте должно заработать..

  27. Никита

    Здравствуйте!!!отличный урок!!!спасибо!!!!
    только хотелось бы узнать можно ли в этот ротатор
    Вставить еще и кнопки стрелки что бы перелистывать и как это сделать??
    Спасибо за ответ.

  28. Ефим

    Мне в этом уроке понравилось, как объясняется логика кода. Для начинающих это полезно. Если можно, допишите пару строк кода который делает следующее.
    Картинки меняются не бесконечно, а скажем, делают три цикла. Затем анимация останавливается. И возобнавляется после обновленя страницы по алгоритму описанному мной. Думаю, что это будет иметь и практическую ценность. Например, меня раздражают постоянные мелькания на сайте. Отвлекают внимание. Поэтому лучше сделать акцент на какой-то теме, а затем оставить пользователя в покое. Спасибо.

  29. Polina

    Вы КРУТЫЕ программисты))) Бесконечное Вам Спасибо!!!

  30. Александр

    Андрей, добрый день!
    Посмотрел Ваш урок «Ротатор картинок». Спасибо, все хорошо!!! Но я понять не могу, как вывести код на странице сайта. Можете подробно объяснить размещения ротатора картинок на сайте.
    Сам я только учусь:)

    С уважением,

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree