Слайд-шоу для сайта
Очень часто задают вопрос: "Как сделать слайд-шоу для сайта". И сложно ли это?
Отвечу сразу, для этого есть разные программы. Но мы сейчас займемся одной из них. Она очень проста в понимании, несложна в исполнении, а эффект изумителен!
Вот как это будет выглядеть в итоге:
Итак, что нам для этого нужно.
- Создать новую папку script, в которую закачиваем архив. Там его и распаковываем.
- На самой странице, где будет располагаться наше слайд-шоу, между тегами <head>...</head> вставляем следующие строчки, где указан путь к скриптам и небольшой javascript, определяющий параметры слайд-шоу:
<script src="scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="scripts/jquery.cycle.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
.slideshow {
width: 500px;
height: 185px;
margin: auto;
}
</style>
width:500px и height:185px - соответственно ширина и высота нашего слайд-шоу, она равна размерам наших картинок, которые должны, естественно быть одного размера. - Осталось загрузить наши изображения.
<div align="center" class="slideshow" >
<img src="i_01.jpg" alt="" width="500" height="250" />
<img src="i_02.jpg" alt="" width="500" height="250" />
<img src="i_03.jpg" alt="" width="500" height="250" />
<img src="i_04.jpg" alt="" width="500" height="250" />
</div>
Вот и все!
Настройка параметров слайд-шоу Slides
В созданном слайд-шоу можно устанавливать разные виды переходов между кадрами, изменяя javascript, размещенный в заголовке страницы. Кроме того, заменив в скрипте строчку sync:false на sync:true, можно убирать пробел при смене изображений. Приведу несколько распространенных вариантов слайд-шоу и соответствующие им скрипты, которые следует вставить в заголовок страницы.
1. Растворение (наш пример): <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' //вид перехода }); }); </script> |
|
2. Перетасовывание: <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'shuffle', sync: false, delay: -2000 //задержка }); }); </script> |
|
3. Зум: <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'zoom', sync: false, delay: -2000 }); }); </script> |
|
4. Переворот по оси X или Y: <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'curtainX', // для поворота по оси Y - curtainY sync: false, delay: -2000 }); }); </script> |
|
5. Сворачивание по вертикали: <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'turnDown', // направление можно задать turnUp, turnLeft, turnRight sync: true, delay: -4000 }); }); </script> |
|
6. Скроллинг (смещение): <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx:'scrollDown', // направление смещения можно задать scrollUp, scrollLeft, scrollRight sync: true, delay: -2000 }); }); </script> |
|
7. Наплыв справа: <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'cover', speed: 1000, //скорость timeout: 3000 //задержка }); }); </script> |
Иногда нужно разместить несколько вариантов слайд-шоу на одной странице сайта, как это сделано в данной статье. Для этого надо просто указывать разные классы для каждого варианта в строчке $('.slideshow').cycle({ (смотрите код в таблице выше), и не забудьте прописать в CSS размеры окна для каждого класса.