Шаг 1. Подключим к документу необходимые скрипты и CSS-стили галереи, для этого между тегами
вставим следующий код:
Code
<link rel="stylesheet" href="css/page.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/slider.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
<script src="js/jquery.anythingslider.js" type="text/javascript"></script>
Шаг 2.
Далее пропишем следующий скрипт:
Code
<script type="text/javascript">
function formatText(index, panel) {
return index + "";
}
$(function () {
$('.anythingSlider').anythingSlider({
easing: "easeInOutExpo", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not.
delay: 3000, // How long between slide transitions in AutoPlay mode
startStopped: false, // If autoPlay is on, this can force it to start stopped
animationTime: 600, // How long the slide transition takes
hashTags: true, // Should links change the hashtag in the URL?
buildNavigation: true, // If true, builds and list of anchor links to link to each slide
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
startText: "Старт", // Start text
stopText: "Стоп", // Stop text
navigationFormatter: formatText // Details at the top of the file on this use (advanced use)
});
$("#slide-jump").click(function(){
$('.anythingSlider').anythingSlider(6);
});
});
</script>
Вы можете поменять параметры delay (он указывает на время задержки между показом двух слайдов), animationTime (он указывает непосредственно на процесс смены слайдов (анимацию)), а также можете заменить названия кнопок "Старт" и "Стоп" на свои слова, например "Начать" и "Закончить".
Чтобы убрать кнопки навигации по слайдам, значение buildNavigation следует установить в значение false.
Остальные параметры не так важны, но вы можете поэкспериментировать с ними.
Шаг 3.
В том месте, в котором вы хотите видеть галерею, следует вставить два блока, указав им следующие стили:
Code
<div class="anythingSlider">
<div class="wrapper">
</div>
</div>
Внутрь этих блоков следует вставить ненумерованный список. Каждый элемент галереи будет представлять отдельный элемент этого списка. Таким образом, код галереи примет следующий вид:
Code
<div class="anythingSlider">
<div class="wrapper">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
Шаг 4.
В каждый элемент
вы можете вставить любое содержимое: а) Картинку:
Code
<img src="images/slide-civil-1.jpg" alt="" />
б) Блок с текстом:
Code
<div id="quoteSlide">
<blockquote>Как создать сайт? Этот вопрос волнует сегодня миллионы умов по всему миру. Многие хотят создать сайт и зарабатывать на нём разными способами!</blockquote>
<a href='http://ruseller.com/'>Ruseller.com</a>
</div>
Стиль quoteSlide прописан в файле page.css, Вы можете изменить стиль по Вашему желанию или написать свой.
в) Блок с текстом и изображением:
Code
<div id="textSlide">
<img src="images/image.jpg" alt="tomato sandwich" style="float: right; margin: 0 0 2px 10px;" />
<h3>Сэндвич с томатами</h3>
Текст</p>
Этот блок оформляется аналогично, как и просто блок с текстом, только Вам нужно указать позиционирование для картинки.
Все! Галерея готова! Спасибо за внимание!
Данный урок подготовлен для Вас командой сайта http://gigasoftik.ru/
