+7(983)178-57-68

Новые горизонты успешного бизнеса!

Главная Посчитать и заказатьОставить заявку Статьи Отзывы Контакты

Красивый скрипт смены картинки (изображения) вперед-назад(вправо влево)

Итак, все те же условия, в нашем примере у нас 10 картинок, две стрелки: вперед и назад, картинка-бэкграунд и добавлена еще сюда возможность смены текста в зависимости от показанной картинки.
Для реализации всей этой красоты нам понадобится скрипт jquery.min.js
Итак, подгружаем данный скрипт
<script type="text/javascript" src="jquery.min.js"></script>
Далее, создаем стиль:
/* убираем рамку всем рисункам */
img{border: none;}
Создаем таблицу:

- 1-ая строка - 3 ячейки
- 2-ая строка - объединение трех ячеек в одну

<table cellspacing="4" cellpadding="0" border='0' id="gallery">
<tr>
<td>
<a href="#" onclick="g_prev(); return false;">
<img src="left.gif" width='30' height='409' alt="<">
</a>
</td>
<!-- Бекграунд виден пока не загрузилась картинка -->
<td style="background-image:URL(loading.gif); background-repeat:no-repeat;">
<img src="1.jpg" width='545' height='409' class="qr">
<img style="display:none" src="2.jpg" width='545' height='409' class="qr">
<img style="display:none" src="3.jpg" width='545' height='409' class="qr">
<img style="display:none" src="4.jpg" width='545' height='409' class="qr">
<img style="display:none" src="5.jpg" width='545' height='409' class="qr">
<img style="display:none" src="6.jpg" width='545' height='409' class="qr">
<img style="display:none" src="7.jpg" width='545' height='409' class="qr">
<img style="display:none" src="8.jpg" width='545' height='409' class="qr">
<img style="display:none" src="9.jpg" width='545' height='409' class="qr">
<img style="display:none" src="10.jpg" width='545' height='409' class="qr">
</td>
<td>
<a href="#" onclick="g_next(); return false;">
<img src="right.gif" width='30' 'height=409' alt=">">
</a>
</td>
</tr>
<tr>
<td colspan='3'>
<center>
<span>Aston Martin DB7</span>
<span style="display:none" class="qr">Audi TT</span>
<span style="display:none" class="qr">Bugatti</span>
<span style="display:none" class="qr">Chevrolet Corvette</span>
<span style="display:none" class="qr">Ferrari</span>
<span style="display:none" class="qr">Dodge Viper</span>
<span style="display:none" class="qr">Ford Mustang</span>
<span style="display:none" class="qr">BMW M3</span>
<span style="display:none" class="qr">Honda NSX Type-R</span>
<span style="display:none" class="qr">Infiniti FX45</span>
</center>
</td>
</tr>
</table>
Затем скрипт
<script type="text/javascript">
var current = 0;

function g_prev() {
current = (current - 1>=0)?current-1:9;
g_toggle(current);
}

function g_next() {
current = (current + 1 <= 9)?current+1:0;
g_toggle(current);
}

function g_toggle(i) {
var b = i;
$('#gallery').find('img.qr:visible').fadeOut(1000, function() { $($('#gallery').find('img.qr').get(b)).fadeIn(1000); });
$('#gallery').find('span.qr:visible').fadeOut(1000, function() { $($('#gallery').find('span.qr').get(b)).fadeIn(1000); });
}
</script>
Ну вот и все
Что тут можно изменить, во-первых можно убрать стрелки и вместо них сделать обычные кнопки:
<input type=button value='Назад' onclick="g_prev(); return false;">
<input type=button value='Вперед' onclick="g_next(); return false;">
или текстовые ссылки:
<a href="#" onclick="g_prev(); return false;">Назад</a>
<a href="#" onclick="g_next(); return false;">Вперед</a>
можно убрать текст, оставив одни лишь изображения, для этого достаточно удалить строку с текстом из таблицы.
Можно удалить картинку-бекграунд, если она вам не нужна.
После всех картинок можно добавить следующее
<span> из 10</span>
А к каждой картинке добавить порядковый номер.

ВАЖНО!!!
Что касается кода JavaScript.

Если у вас картинок не 10 необходимо изменить строки
current = (current - 1>=0)?current-1:9; - где последняя цифра количество картинок-1, и строку
current = (current + 1 <= 9)?current+1:0; - где 9 тоже количество картинок-1

В функции function g_toggle(i) можно изменить время смены картинки, в нашем примере это 1000 мс, можете поставить любое, можно поэкспериментировать, и поставить различное время для картинок и текста.

Демонстрация


Остались вопросы? Спрашивайте!


Понравилась статья? Расскажи другим :)

Опубликовано: | Просмотров: 7936