15 апреля, 2014 
Alexjc 
Галерея слайдшоу представляет собой листалку картинок, а также список ссылок с цифрами на картинки.
Код HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="js/slideshow.js"></script> <link rel="stylesheet" type="text/css" href="css/slideshow.css"> </head> <body> <div class="b-slideshow"> <div class="b-slideshow-area"> <div class="b-slideshow-list"> <div class="b-slideshow-item"> <img src="img/slide1.jpg" alt="" /> </div> <div class="b-slideshow-item"> <img src="img/slide2.jpg" alt="" /> </div> <div class="b-slideshow-item"> <img src="img/slide3.jpg" alt="" /> </div> <div class="b-slideshow-item"> <img src="img/slide4.jpg" alt="" /> </div> <div class="b-slideshow-item"> <img src="img/slide5.jpg" alt="" /> </div> <div class="b-slideshow-item"> <img src="img/slide6.jpg" alt="" /> </div> </div> </div> <div class="b-slideshow-leftarr"></div> <div class="b-slideshow-rightarr"></div> </div> </body> </html> |
Код CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
* { margin: 0; padding: 0; } body { padding: 20px; } .b-slideshow { height: 480px; width: 640px; margin: 0 auto; position: relative; } .b-slideshow-area { width: 640px; height: 480px; overflow: hidden; } .b-slideshow-list { position: relative; left: 0; width: 100000px; letter-spacing: -0.25em; } .b-slideshow-item { display: inline-block; //display: inline; //zoom:1; width: 640px; height: 480px; } .b-slider-nav { text-align: right; position: absolute; right: 10px; bottom: 10px; } .b-slider-nav li { display: inline-block; //display: inline; //zoom:1; } .b-slider-nav li a { display: inline-block; //display: inline; //zoom:1; width: 23px; height: 20px; font: normal 12px/20px arial; background: #fff; text-align: center; color: #000; text-decoration: none; margin-left: 3px; } .b-slider-nav li.active a { color: #fff; background: #900; } .b-slider-nav li a:hover { color: #fff; background: #c00; } .b-slideshow-leftarr { width: 47px; height: 49px; position: absolute; left: 29px; top: 220px; background: url("../img/arr_l.png"); cursor: pointer; } .b-slideshow-rightarr { width: 46px; height: 47px; position: absolute; right: 29px; top: 220px; background: url("../img/arr_r.png"); cursor: pointer; } |
JavaScript код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
$(document).ready(function() { var slidesNumber = $(".b-slideshow-item").size(); // определяем количество слайдов var slideWidth = $(".b-slideshow-item").eq(1).width(); // определяем ширину одного слайда $(".b-slideshow-list").after('<ul class="b-slider-nav"></ul>'); // создаём блок списка ссылок на слайды var navCont = $(".b-slider-nav").html(); //заполняем список ссылками на каждый слайд: for(var i=1; i<=slidesNumber; i++){ $(".b-slider-nav").html(navCont+'<li><a href="#">'+i+'</a></li>'); navCont = $(".b-slider-nav").html(); }; $(".b-slider-nav li").eq(0).addClass("active"); // делаем активной ссылку на первый слайд var activeSlide = 1; $(".b-slider-nav li").click(function(){ // при клике на элемент списка слайдов $(".b-slider-nav li").removeClass("active"); // убираем класс active у всех элементов $(this).addClass("active"); // добавляем класс active к элементу, на который кликнул пользователь var clickedSlide = $(this).index()+1; // в переменную clickedSlide записываем порядковый номер кликнутой ссылки $(".b-slideshow-list").animate({ left: -slideWidth*(clickedSlide-1)+"px" // производим анимацию: перемещаем набор слайдов так, чтобы в видимой области появился слайд с номером, соответствующим номеру ссылки, на которую кликнул пользователь }, 800); // анимация будет длиться 800 милисекунд activeSlide = $(".b-slider-nav li.active").index()+1; // в переменную activeSlide записываем порядковый номер выбранного слайда }); $(".b-slideshow-rightarr").click(function(){ // при клике на правую стрелку if(activeSlide<slidesNumber){ // если номер активного слайда меньше общего количества слайдов $(".b-slideshow-list").animate({ left: "-=0"+slideWidth+"px" // показываем следующий слайд }, 800); activeSlide++; // делаем следующий слайд активным $(".b-slider-nav li").removeClass("active"); $(".b-slider-nav li").eq(activeSlide-1).addClass("active"); // делаем активной следующую ссылку } else { // если номер активного слайда не меньше общего количества слайдов $(".b-slideshow-list").animate({ left: "0px" // перелистываем слайдшоу в начало, к первому слайду }, 800); $(".b-slider-nav li").removeClass("active"); $(".b-slider-nav li").eq(0).addClass("active"); // делаем активным первый слайд activeSlide = $(".b-slider-nav li.active").index()+1; // делаем активной первую ссылку } }); $(".b-slideshow-leftarr").click(function(){ // при клике на левую стрелку if(activeSlide>1){ // если номер активного слайда больше единицы $(".b-slideshow-list").animate({ left: "+=0"+slideWidth+"px" // пролистываем к предыдущему слайду }, 800); activeSlide--; // делаем предыдущий слайд активным $(".b-slider-nav li").removeClass("active"); $(".b-slider-nav li").eq(activeSlide-1).addClass("active"); // делаем активной предыдущую ссылку } else { $(".b-slideshow-list").animate({ left: -slideWidth*(slidesNumber-1)+"px" // перелистываем всё слайдшоу в конец, к последнему слайду }, 800); $(".b-slider-nav li").removeClass("active"); $(".b-slider-nav li").eq(-1).addClass("active"); // делаем активным последний слайд activeSlide = $(".b-slider-nav li.active").index()+1; // делаем активной последнюю ссылку } }); }); |
Eventually, these same writers commonly use alcohol and http://homeworkhelper.net/ drugs to unwind, to turn off the spinning brain after the days work is finished
Posted in 