2015
26
Сен

Слайдер картинок



На сайте уже имеются уроки по созданию слайдера разной конфигурации, с которыми можно ознакомиться

Этот слайдер можно с успехом применить на любой странице вашего сайта. Достаточно подобрать необходимый материал. Картинки и текст будут отражать ваши новости на сайте или показывать новый материал.

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



HTML


Создаем блок с идентификатором id="main" класса container, в котором будут располагаться в виде списка блоки для надписей и картинок. Обратите внимание, ссылкой на маленькое изображения является большое изображение. Размер изображений для данной фотогалереи: большие 600 х 456 пикселей, маленькие – 50 х 38. Блок класса main_image имеет размеры 598 х 456 – прописывается в стилях CSS. Блок id="main" располагается внутри списка. В данном блоке размещаете свои изображения, текстовый материал.

<div id="main" class="container"> <div class="main_image"> <img src="images/banner01.png" alt="- banner1" /> <div class="desc"> <div class="block"> <h2>Унылая пора!</h2> <small>А. С. Пушкин </small> <p>Унылая пора! Очей очарованье!<br> Приятна мне твоя прощальная краса —<br> Люблю я пышное природы увяданье,<br> В багрец и в золото одетые леса,</p> </div></div></div> <div class="image_thumb"> <ul> <li> <a href="images/banner01.png"><img src="images/banner01_thumb.png" alt="Унылая пора!" /></a> <div class="block"> <h2>Унылая пора!</h2> <small>А. С. Пушкин</small> <p>Унылая пора! Очей очарованье!<br> Приятна мне твоя прощальная краса —<br> Люблю я пышное природы увяданье,<br> В багрец и в золото одетые леса,</p> </div> </li> <li> <a href="images/banner02.png"><img src="images/banner02_thumb.png" alt="Листопад" /></a> <div class="block"> <h2>Листопад</h2> <small>Иван Бунин</small> <p>Лес, точно терем расписной,<br> Лиловый, золотой, багряный,<br> Веселой, пестрою стеной<br> Стоит над светлою поляной.</p> </div> </li> <li> <a href="images/banner03.png"><img src="images/banner03_thumb.png" alt="Осень" /></a> <div class="block"> <h2>Осень</h2> <small>Аполлон Майков </small> <p>Кроет уж лист золотой<br> Влажную землю в лесу...<br> Смело топчу я ногой<br> Вешнюю леса красу.</p> </div> </li> <li> <a href="images/banner04.png"><img src="images/banner04_thumb.png" alt="Есть в осени первоначальной" /></a> <div class="block"> <h2>Есть в осени первоначальной</h2> <small>Федор Тютчев</small> <p>Есть в осени первоначальной<br> Короткая, но дивная пора —<br> Весь день стоит как бы хрустальный,<br> И лучезарны вечера...</p> </div> </li> <li> <a href="images/banner05.png"><img src="images/banner05_thumb.png" alt="Цветная осень" /></a> <div class="block"> <h2>Цветная осень</h2> <small>Самуил Маршак</small> <p>Цветная осень - вечер года -<br> Мне улыбается светло.<br> Но между мною и природой<br> Возникло тонкое стекло.</p> </div> </li> <li> <a href="images/banner06.png"><img src="images/banner06_thumb.png" alt="laboratory background night" /></a> <div class="block"> <h2>Осень ранняя</h2> <small>Булат Окуджава</small> <p>Падают листья.<br> Осторожно ступайте в траву.<br> Каждый лист — это мордочка лисья...<br> Вот земля, на которой живу.</p> </div> </li> </ul> </div></div>


CSS


В источнике для слайдера свойства CSS имеются, их нужно только подключить на страницу.

.container { overflow: hidden; width: 900px; margin: 0 auto; } #main { padding: 10px; background: #f0f0f0; /*цвет рамки слайдера*/ border: 1px solid #ccc; } a {color: #fff;} /*--Main Image Preview--*/ .main_image { width: 598px; height: 456px; float: left; background: #333; position: relative; overflow: hidden; color: #fff; } .main_image h2 { font-size: 2em; font-weight: normal; margin: 0 0 5px; padding: 10px; } .main_image p { font-size: 1.2em; padding: 10px; margin: 0; line-height: 1.6em; } .block small { padding: 0 0 0 20px; font-size: 1em; } .main_image .block small {margin-left: 10px;} .main_image .desc{ position: absolute; bottom: 0; left: 0; width: 100%; display: none; } .main_image .block{ width: 100%; background:#D16700; border-top: 1px solid #000; } .main_image a.collapse { background:url(../images/btn_coll.gif) no-repeat left top; height: 27px; width: 93px; text-indent: -99999px; position: absolute; top: -27px; right: 20px; } .main_image a.show {background-position: left bottom;} .image_thumb { float: left; width: 299px; background: #f0f0f0; border-right: 1px solid #fff; border-top: 1px solid #ccc; } .image_thumb img { border: 1px solid #ccc; padding: 5px; background: #fff; float: left; } .image_thumb ul { margin: 0; padding: 0; list-style: none; } .image_thumb ul li{ margin: 0; padding: 12px 10px; background: #f0f0f0 url(../images/nav_a.gif) repeat-x; width: 279px; float: left; border-bottom: 1px solid #ccc; border-top: 1px solid #fff; border-right: 1px solid #ccc; } .image_thumb ul li.hover { background: #ddd; cursor: pointer; } .image_thumb ul li.active { background: #fff; cursor: default; } html .image_thumb ul li h2 { font-size: 1.5em; margin: 5px 0; padding: 0; } .image_thumb ul li .block { float: left; margin-left: 10px; padding: 0; width: 180px; } .image_thumb ul li p{display: none;} >

JS


Для работы слайдера подключите библиотекуJS из источника.

На странице HTML пропишите скрипт для работы слайдера. Скорость показа можно регулировать функцией var slidetime = 5000;. Цифра в записи показывает скорость показа слайдера в миллисекундах.

<script type="text/javascript"> var intervalId; var slidetime = 5000; // milliseconds between automatic transitions $(document).ready(function() { // Comment out this line to disable auto-play intervalID = setInterval(cycleImage, slidetime); $(".main_image .desc").show(); // Show Banner $(".main_image .block").animate({ opacity: 0.85 }, 1 ); // Set Opacity // Click and Hover events for thumbnail list $(".image_thumb ul li:first").addClass('active'); $(".image_thumb ul li").click(function(){ // Set Variables var imgAlt = $(this).find('img').attr("alt"); // Get Alt Tag of Image var imgTitle = $(this).find('a').attr("href"); // Get Main Image URL var imgDesc = $(this).find('.block').html(); // Get HTML of block var imgDescHeight = $(".main_image").find('.block').height(); // Calculate height of block if ($(this).is(".active")) { // If it's already active, then... return false; // Don't click through } else { // Animate the Teaser $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() { $(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 ); $(".main_image img").attr({ src: imgTitle , alt: imgAlt}); }); } $(".image_thumb ul li").removeClass('active'); // Remove class of 'active' on all lists $(this).addClass('active'); // add class of 'active' on this list only return false; }) .hover(function(){ $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }); // Toggle Teaser $("a.collapse").click(function(){ $(".main_image .block").slideToggle(); $("a.collapse").toggleClass("show"); }); // Function to autoplay cycling of images // Source: http://stackoverflow.com/a/9259171/477958 function cycleImage(){ var onLastLi = $(".image_thumb ul li:last").hasClass("active"); var currentImage = $(".image_thumb ul li.active"); if(onLastLi){ var nextImage = $(".image_thumb ul li:first"); } else { var nextImage = $(".image_thumb ul li.active").next(); } $(currentImage).removeClass("active"); $(nextImage).addClass("active"); // Duplicate code for animation var imgAlt = $(nextImage).find('img').attr("alt"); var imgTitle = $(nextImage).find('a').attr("href"); var imgDesc = $(nextImage).find('.block').html(); var imgDescHeight = $(".main_image").find('.block').height(); $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() { $(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 ); $(".main_image img").attr({ src: imgTitle , alt: imgAlt}); }); }; });// Close Function </script>

Удачи Вам в работе!