Verification: 56e52e1e21d112f8 Франция- Главная страница Персональный сайт - Слайд-карусель
                                      


Меню сайта

Search

Статистика

free counters

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Форма входа



 
       
Карусель из картинок
        
Картинки двигаются друг за другом, как настоящая карусель. При наведении мышки на любую такую картинку, карусель останавливается. Многие устраивают конкурсы фоток или ещё чего и победителей ставят на сайте в верху, этот скрипт можно использовать и для этих целей. Тут пример
        
        
Вот это ставим в боди,без этой строки код не будет работать.
        


        
"Карусель" на jQuery

На http://plugins.jquery.com/ в разделе "Animation and Effects" присмотрел Step Carousel Viewer, просто понравилась.
На их странице достаточно хорошая инструкция, есть и пример.

Но все и из такого файла запустить можно
---[carousel.html]---
<html>
<head>
<script type="text/javascript" src="http://www.dynamicdrive.com/jquery/jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex4/stepcarousel.js"></script>
<link rel="STYLESHEET" type="text/css" href="style.css" />
</head>

<body>
<script type="text/javascript" src="script.js"></script>

<div id="mygallery" class="stepcarousel">
<div class="belt">
<div class="panel"> <!-- Первая картинка -->
<img src="http://i30.tinypic.com/531q3n.jpg" />
</div>
<div class="panel"> <!-- Вторая картинка -->
<img src="http://i29.tinypic.com/xp3hns.jpg" />
</div>
<div class="panel"> <!-- Третья картинка -->
<img src="http://i26.tinypic.com/11l7ls0.jpg" />
</div>
<div class="panel"> <!-- Четвертая картинка -->
<img src="http://i31.tinypic.com/119w28m.jpg" />
</div>
<div class="panel"> <!-- Пятая картинка -->
<img src="http://i27.tinypic.com/34fcrxz.jpg" />
</div>
</div>
</div>

<p>
<b>Текущая картинка:</b> <span id="statusA"></span> <b style="margin-left: 30px">Всего картинок:</b> <span id="statusC"></span><br />
<a href="javascript:stepcarousel.stepBy('mygallery', -1)">Назад на 1 картинку</a> <a href="javascript:stepcarousel.stepBy('mygallery', 1)" style="margin-left: 80px">Вперед на 1 картинку</a> <br />
<a href="javascript:stepcarousel.stepTo('mygallery', 1)">К началу</a> <a href="javascript:stepcarousel.stepBy('mygallery', 2)" style="margin-left: 80px">Вперед на 2 каринки</a>
</p>
</body>
</html>---

---[style.css]---
.stepcarousel{
position: relative; /*Не трогать*/
border: 10px solid black;
overflow: scroll; /*Это тоже не трогать*/
width: 270px; /*Ширина окошка Карусели*/
height: 200px; /*Высота. Должно хватать для самого большого элемента*/
}

.stepcarousel .belt{
position: absolute; /*И это тоже не трога*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*Ну, и это, конечно, тоже*/
overflow: hidden; /*Скрыть, все, что вылазить за div окошка*/
margin: 10px; /*отсут вокруг каждой картинки*/
width: 250px; /*Ширина для всех картинок. Если убрать, то для каждого div нужно будет назначать отдельно*/
}---

---[script.js]---
stepcarousel.setup({
galleryid: 'mygallery', //id DIV'а карусели
beltclass: 'belt', //класс внутреннего "belt" div со всеми div картинок
panelclass: 'panel', //класс DIV картинок
panelbehavior: {speed:500, wraparound:false, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
statusvars: ['statusA', 'statusB', 'statusC'], //зарегить 3 переменные для хранения номера текущей картинки (start), текущей картинки (last), и картинок всего
contenttype: ['inline'] //можеть быть ['inline'] или ['external', 'path_to_external_file']
})---

Полученные css и js можно аккуратненько минимизировать на YUI compressor или jsMin или еще где, а потом упаковать через Packer        
        
************
        
        
Демонстрация слайдов может быть установлена, чтобы скользить с права на лево или наоборот. Демонстрация слайдов может быть установлена 4-сторонним, 6, 8, или 12. 4-сторонняя демонстрация слайдов например означает, что 2 изображения будут в поле зрения всегда (другие два позади сцены). Каждое изображение имеет дополнительную ссылку. Паузы демонстрации слайдов на mouseover. Сценарий который работает в современных DHTML браузерах - IE5 +, NS6 +, Опера 7 +.
        
Шаг №1 - Скопируйте приведенный ниже код где будет находиться слайд.
        
        
Шаг №2 - Загрузите в корневую папку это рисунок placeholder.gif-
        
Шаг №3 - Скопируйте приведенный ниже код в тэг
        
Copyright MyCorp © 2024 |