Простое слайдшоу на jQuery

В данном уроке представлено очень простое слайд шоу на основе jQuery. Навигация слайд шоу позволяет перемещаться между изображениями и переходить на первую и последнюю картинку. Кроме того, для быстрого перехода к картинке используется панель миниатюр.

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

 

HTML

В примере используется 6 изображений. Разметка галереи состоит из контейнера, в который включены три элемента div. Элемент divnavigate содержит элементы навигационной панели. Элемент div img_container выводит полноразмерные изображения. А элемент div imgtmub_box предназначен для организации панели миниатюр.

  <div id="container">
      <div id="navigate">
          <a href="/" id="linkfirst">&laquo; Первая</a>
          <span id="spanfirst">&laquo; Первая</span>
          <a href="/" id="linkprev">&lsaquo;</a>
          <span id="spanprev">&lsaquo;</span>
          <a href="/" id="linknext">&rsaquo;</a>
          <span id="spannext">&rsaquo;</span>
          <a href="/" id="linklast">Последняя &raquo;</a>
          <span id="spanlast">Последняя &raquo;</span>
      </div>
      <div id="img_container">
          <div id="img_box">
              <img id="img1" src="/img/original/01.jpg"/>
              <img id="img2" src="/img/original/02.jpg"/>
              <img id="img3" src="/img/original/03.jpg"/>
              <img id="img4" src="/img/original/04.jpg"/>
              <img id="img5" src="/img/original/05.jpg"/>
              <img id="img6" src="/img/original/06.jpg"/>
              <div style="clear:both;"></div>
          </div>
      </div>
      <div id="imgthumb_box">
          <a href="/" class="thumblink" id="imglink1"><img src="/img/thumb/01.jpg"/></a>
          <a href="/" class="thumblink" id="imglink2"><img src="/img/thumb/02.jpg"/></a>
          <a href="/" class="thumblink" id="imglink3"><img src="/img/thumb/03.jpg"/></a>
          <a href="/" class="thumblink" id="imglink4"><img src="/img/thumb/04.jpg"/></a>
          <a href="/" class="thumblink" id="imglink5"><img src="/img/thumb/05.jpg"/></a>
          <a href="/" class="thumblink" id="imglink6"><img src="/img/thumb/06.jpg"/></a>
      </div>
   </div>


 

jQuery

Перемещение изображений в основном реализуется посредством изменения свойства left. По умолчанию свойство left для элемента img_box имеет значение 0 px или auto в зависимости от используемого браузера. Данный момент контролируется и в коде и соответственно выставляется значение 0 для переменной box_left.

Если кнопка для перехода на следующее изображение нажата на последнем изображении, то осуществляется переход на первое изображение. Для кнопки перехода на предыдущее изображение реализована аналогичная логика перемещения на последнее изображение.

   $(document).ready(function() {
        var total = $("#img_box img").length;

        $("#imglink1 img").css({
            "border-color": "#0099cc",
            "top": "-5px"
        });

        $(".thumblink").click(function() {
            var imgnumber = parseInt($(this).attr('id').replace("imglink", ""));
            var move = -($("#img"+imgnumber).width() * (imgnumber - 1));

            $("#img_box").animate({
                left: move
            }, 500);

            $("#imgthumb_box").find("img").removeAttr("style");
            $(this).find("img").css({
                "border-color": "#0099cc",
                "top": "-5px",
                "border-top-width": "-5px"
            });
            return false;
        });

        $("#navigate a").click(function() {
            var imgwidth = $("#img1").width();
            var box_left = $("#img_box").css("left");
            var el_id = $(this).attr("id");
            var move, imgnumber;

            if (box_left == 'auto') {
                box_left = 0;
            } else {
                box_left = parseInt(box_left.replace("px", ""));
            }

            // Если нажата кнопка для перехода на предыдущее изображение
            if (el_id == 'linkprev') {
                if ((box_left - imgwidth) == -(imgwidth)) {
                    move = -(imgwidth * (total - 1));
                } else {
                    move = box_left + imgwidth;
                }

                imgnumber = -(box_left / imgwidth);
                if (imgnumber == 0) {
                    imgnumber = total;
                }
            } else if (el_id == 'linknext') {
                // Если изображение последнее, то переходим на первую картинку
                if (-(box_left) == (imgwidth * (total - 1))) {
                    move = 0;
                } else {
                    move = box_left - imgwidth;
                }

                imgnumber = Math.abs((box_left / imgwidth)) + 2;
                if (imgnumber == (total + 1)) {
                    imgnumber = 1;
                }
            } else if (el_id == 'linkfirst') {
                move = 0;
                imgnumber = 1;
            } else if (el_id == 'linklast') {
                move = -(imgwidth * (total - 1));
                imgnumber = total;
            }

            // Стили для выбранной картинки
            $("#imgthumb_box").find("img").removeAttr("style");
            $("#imglink"+imgnumber).find("img").css({
                "border-color": "#0099cc",
                "top": "-5px",
                "border-top-width": "-5px"
            });

            $("#navigate a").hide();
            $("#navigate span").show();

            $("#img_box").animate({
                left: move+'px'
            }, 400, function() {
                $("#navigate a").show();
                $("#navigate span").hide();
            });

            return false;
        });
    });

 

CSS

Контейнер img_box должен иметь свойство overflow: hidden, так как все изображения располагаются в нем в одну строку.

       body {
            margin: 0;
            padding: 0;
            font-family: Arial, "Free Sans";
        }
        #main {
            background: #0099cc;
            margin-top: 0;
            padding: 2px 0 4px 0;
            text-align: center;
        }
        #main a {
            color: #ffffff;
            text-decoration: none;
            font-size: 12px;
            font-weight: bold;
            font-family: Arial;
        }
        #main a:hover {
            text-decoration: underline;
        }
        #container {
            margin-top: 40px;
        }
        #navigate {
            text-align: center;
        }
        #navigate a, span {
            position: relative;
            top: 3px;
            background: #0099cc;
            text-decoration: none;
            color: #fff;
            padding: 4px 8px 0 8px;
            font-size: 20px;
            font-weight: bold;
            -webkit-border-radius: .3em .3em 0 0;
            -moz-border-radius: .3em .3em 0 0;
            border-radius: .3em .3em 0 0;
        }
        #navigate a:hover {
            color: #d3d3d3;
        }
        #navigate span {
            display: none;
            color: #999;
        }
        #img_container {
            overflow: hidden;
            width: 500px;
            margin: 0 auto;
            border: 8px solid #0099cc;
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
        }
        #img_box {
            position: relative;
            width: 3000px;
            margin: 0;
        }
        #img_box img {
            float: left;
        }
        #imgthumb_box {
            text-align: center;
        }
        #imgthumb_box a {
            margin-left: 4px;
        }
        #imgthumb_box a img {
            border: 6px solid #e3e3e3;
            position: relative;
            top: 10px;
            -webkit-border-radius: .3em;
            -moz-border-radius: .3em;
            border-radius: .3em;
        }
        #imgthumb_box a img:hover {
            border-color: #666;
        }



Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/Q9r52MFdm-g/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Простое слайдшоу на jQuery | | 2012-06-19 12:05:19 | | Статьи Web-мастеру | | В данном уроке представлено очень простое слайд шоу на основе jQuery. Навигация слайд шоу позволяет перемещаться между изображениями и переходить на первую и последнюю картинку. Кроме того, для | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: