Слайд-шоу на jQuery

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

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

HTML

Ниже приведен HTML код, в нем присутствуют шесть изображений, также присутствует список миниатюр, кликнув по которым, можно перейти к выбранному изображению.

<div id="container">
	  <div id="navigate">
   <a href="/" id="linkfirst">« first</a>
   <span id="spanfirst">« first</span>
   <a href="/" id="linkprev">‹ prev</a>
   <span id="spanprev">‹ prev</span>
   <a href="/" id="linknext">next ›</a>
   <span id="spannext">next ›</span>
   <a href="/" id="linklast">last »</a>
   <span id="spanlast">last »</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>

CSS

Блок под изображения (img_container) обязательно должен иметь свойство overflow со значением hidden, так как этот блок содержит все изображения, которые расположены горизонтально друг за другом.

	#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;
	}

JQuery

Ниже приведен код jQuery, все построено на свойстве css left блока #img_box, по умолчанию свойство left = 0px (в firefox), или left = ‘auto’ (в Chrome, Opera, IE).

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

	$(document).ready(function() {
    // подсчитываем количество изображений
 var total = $("#img_box img").length;
	 
 $("#imglink1 img").css({
     "border-color": "#0099cc",
     "top": "-5px"
 });
   // кликаем по минюатюрам   
 $(".thumblink").click(function() {
   // получаем номер img, по кот. кликнули
var imgnumber = parseInt($(this).attr('id').replace("imglink", ""));
   // сдвигаем #img_box на величину move, со скоростью 500мс
     var move = -($("#img"+imgnumber).width() * (imgnumber - 1));
	 
     $("#img_box").animate({
         left: move
     }, 500);
   // удаляем атрибут style 
     $("#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() {
   // ширина изображений #img1 
     var imgwidth = $("#img1").width();
   // получаем значение свойства left   
     var box_left = $("#img_box").css("left");
   // получаем значение атрибута id 
     var el_id = $(this).attr("id");
     var move, imgnumber;
	 
     if (box_left == 'auto') {
         box_left = 0;
     } else {
   // если left не auto, огругляем до целого и заменям px 
         box_left = parseInt(box_left.replace("px", ""));
     }
	 
   // если кликаем по prev 
     if (el_id == 'linkprev') {
         if ((box_left - imgwidth) == -(imgwidth)) {
             move = -(imgwidth * (total - 1));
         } else {
   // величина для св-ва left     
             move = box_left + imgwidth;
         }
	 
         imgnumber = -(box_left / imgwidth);
         if (imgnumber == 0) {
             imgnumber = total;
         }
     } 
   // если кликаем по next 
       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;
 });
	});

Источник