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

Итак, все те же условия, в нашем примере у нас 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 мс, можете поставить любое, можно поэкспериментировать, и поставить различное время для картинок и текста.

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