Слайд-шоу с разным временем показа изображений

[Admin]

В данной теме мы хотим показать Вам небольшую модификацию скрипта плавной смены изображений на jQuery, которая заключается в добавлении дополнительной задержки показа для указанных изображений.

Скрипт конечно получился не очень "красивый", но вполне рабочий.

Единственный минус - что интервал задержки указанных изображений может быть только кратным исходному интервалу смены изображений. Другими словами, если у Вас интервал смены изображений равен 1500 мс, то дополнительная задержка может быть 1500 мс, 3000 мс, 4500 мс и т.д.

Код целиком:

Код:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<img src="image/img_1.png" alt="" id="slide_show"><br>
<span id="slide_text">Картинка 1</span>

<script type="text/javascript">
var imgs = ["image/img_1.png","image/img_2.png","image/img_3.png","image/img_4.png"];
var text = ['Картинка 1','<a href="index.php">Картинка 2</a>','<b style="color: red;">Картинка 3</b>','Картинка 4'];
var n = 0;
var i = 0;
var flag = true;
var time = 200;
play=setInterval("chgImg(0)", 1000);

function chgImg(number) {
if (number!=0) n = number - 2;

flag = true;
if (n==1 && i!=3) flag = false;        //дополнительная задержка для 2 изображения в 3 интервала
if (n==3 && i!=1) flag = false;       //дополнительная задержка для 4 изображения в 1 интервал
if (flag!=false) {
i = 0;
$('#slide_show').fadeOut(time, function() {    //для картинок
  $(this).attr('src', imgs[n]).fadeIn(time);
});

$('#slide_text').fadeOut(time, function() {    //для текста
  $(this).html(text[n]).fadeIn(time);
});

n++;
if (n>=imgs.length) n = 0;
}
else i++;
}
</script>