Модификация скрипта плавной смены изображений на jQuery

[Swisss]

Теперь всплыл такой нюанс - видимо из-за того что в 1 и 2 блоке у меня по 3 изображения, а в 3 блоке всего 2, то в 3 блоке последнее изображение выводится на экран 2 раза подряд. Как можно поправить?

Спасибо.

---

Может разделить саму функцию? Сначала 1 и 2 блок, а потом отдельно 3 блок?

[Admin]

Вот, вроде что-то получилось, только уже поздно и спать хочется.

Код:

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

<script type="text/javascript">
var imgs = [['image/img_1.png','image/img_2.png','image/img_3.png','image/img_4.png'],
            ['image/img_2.png','image/img_3.png','image/img_4.png'],
            ['image/img_3.png','image/img_4.png']];
var links = [['news.php','script.php','useful_site.php','trick.php'],
            ['script.php','useful_site.php','trick.php'],
            ['useful_site.php','trick.php']];

var text = [[],
            ['Произвольный текст','Другой текст','Просто текст'],
            ['Другой текст','Просто текст']];

var n = [0,0,0];
time = 800;
play = setInterval("chgImg(1)", 2500);
play2 = setInterval("chgImg(2)", 3500);
play3 = setInterval("chgImg(3)", 4000);

function chgImg(num) {
var nn=num-1;
n[nn] += 1;
if (n[nn] > imgs[nn].length-1) n[nn] = 0;
$('#slide_show_'+num+', #slide_show_text_'+num+', #slide_show_links_'+num).fadeOut(time, function() {
$('#slide_show_links_'+num).attr('href', links[nn][n[nn]]);
$('#slide_show_text_'+num).html(text[nn][n[nn]]);
$('#slide_show_'+num).attr('src', imgs[nn][n[nn]]);
$('#slide_show_'+num+', #slide_show_text_'+num+', #slide_show_links_'+num).fadeIn(time);
});
}
</script>

<a href="news.php" id="slide_show_links_1"><img src="image/img_1.png" alt="" id="slide_show_1"></a>
<br><br>

<a href="script.php" id="slide_show_links_2"><img src="image/img_2.png" alt="" id="slide_show_2"></a>
<div id="slide_show_text_2">Произвольный текст</div>
<br><br>

<div id="slide_show_text_3">Другой текст</div>
<a href="useful_site.php" id="slide_show_links_3"><img src="image/img_3.png" alt="" id="slide_show_3"></a>
<br><br>

Теперь можно для каждого слайд-шоу указывать свой интервал для смены изображений.

[Swisss]

Спасибо за помощь! Все никак не могу добраться и проверить. На днях думаю отпишусь, но думаю что все работает =)

[PTslawa681]

Имеется три скрипта информера погоды. Возможно ли их поочерёдно загружать через ваш скрипт, и если возможно, то что нужно изменить в скрипте?

Код:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="160" HEIGHT="113"
id="loader" ALIGN=""> <PARAM NAME=movie VALUE="http://rp5.ru/informer/group/1/29.swf">
<PARAM NAME=quality VALUE=high> <PARAM NAME=scale VALUE=noscale>
<PARAM NAME=salign VALUE=LT> <PARAM NAME=wmode VALUE=transparent>
<PARAM NAME=bgcolor VALUE=#FFFFFF> <PARAM NAME=flashvars VALUE="points=141690,8218&lang=ru&um=00000">
<EMBED src="http://rp5.ru/informer/group/1/29.swf" quality=high scale=noscale salign=LT wmode=transparent
bgcolor=#FFFFFF  WIDTH="160" HEIGHT="113" NAME="loader" flashvars="points=141690,8218&lang=ru&um=00000" ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT>

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="160" HEIGHT="113" id="loader" ALIGN=""> <PARAM NAME=movie VALUE="http://rp5.ru/informer/group/1/23.swf">
<PARAM NAME=quality VALUE=high> <PARAM NAME=scale VALUE=noscale> <PARAM NAME=salign VALUE=LT>
<PARAM NAME=wmode VALUE=transparent> <PARAM NAME=bgcolor VALUE=#FFFFFF>
<PARAM NAME=flashvars VALUE="points=141690,8218&lang=ru&um=00000">
<EMBED src="http://rp5.ru/informer/group/1/23.swf" quality=high scale=noscale salign=LT wmode=transparent
bgcolor=#FFFFFF  WIDTH="160" HEIGHT="113" NAME="loader" flashvars="points=141690,8218&lang=ru&um=00000" ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT>

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="160" HEIGHT="113" id="loader" ALIGN=""> <PARAM NAME=movie VALUE="http://rp5.ru/informer/group/1/16.swf">
<PARAM NAME=quality VALUE=high> <PARAM NAME=scale VALUE=noscale> <PARAM NAME=salign VALUE=LT>
<PARAM NAME=wmode VALUE=transparent> <PARAM NAME=bgcolor VALUE=#FFFFFF>
<PARAM NAME=flashvars VALUE="points=141690,5485&lang=ru&um=00000">
<EMBED src="http://rp5.ru/informer/group/1/16.swf" quality=high scale=noscale salign=LT wmode=transparent
bgcolor=#FFFFFF  WIDTH="160" HEIGHT="113" NAME="loader" flashvars="points=141690,5485&lang=ru&um=00000" ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT>

[Admin]

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

Код:

<span id="slide_text">Тут будет информер</span>

<script type="text/javascript">
var text = ['<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"'+
'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"'+
'WIDTH="160" HEIGHT="113" id="loader" ALIGN=""> <PARAM NAME=movie VALUE="http://rp5.ru/informer/group/1/29.swf">'+
'<PARAM NAME=quality VALUE=high> <PARAM NAME=scale VALUE=noscale> <PARAM NAME=salign VALUE=LT>'+
'<PARAM NAME=wmode VALUE=transparent> <PARAM NAME=bgcolor VALUE=#FFFFFF>'+
'<PARAM NAME=flashvars VALUE="points=141690,8218&lang=ru&um=00000">'+
'<EMBED src="http://rp5.ru/informer/group/1/29.swf" quality=high scale=noscale salign=LT wmode=transparent'+
'bgcolor=#FFFFFF WIDTH="160" HEIGHT="113" NAME="loader" flashvars="points=141690,8218&lang=ru&um=00000" ALIGN=""'+
'TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT>',
'<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"'+
'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"'+
'WIDTH="160" HEIGHT="113" id="loader" ALIGN=""> <PARAM NAME=movie VALUE="http://rp5.ru/informer/group/1/23.swf">'+
'<PARAM NAME=quality VALUE=high> <PARAM NAME=scale VALUE=noscale> <PARAM NAME=salign VALUE=LT>'+
'<PARAM NAME=wmode VALUE=transparent> <PARAM NAME=bgcolor VALUE=#FFFFFF>'+
'<PARAM NAME=flashvars VALUE="points=141690,8218&lang=ru&um=00000">'+
'<EMBED src="http://rp5.ru/informer/group/1/23.swf" quality=high scale=noscale salign=LT wmode=transparent'+
'bgcolor=#FFFFFF WIDTH="160" HEIGHT="113" NAME="loader" flashvars="points=141690,8218&lang=ru&um=00000" ALIGN=""'+
'TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT>',
'<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"'+
'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"'+
'WIDTH="160" HEIGHT="113" id="loader" ALIGN=""> <PARAM NAME=movie VALUE="http://rp5.ru/informer/group/1/16.swf">'+
'<PARAM NAME=quality VALUE=high> <PARAM NAME=scale VALUE=noscale> <PARAM NAME=salign VALUE=LT>'+
'<PARAM NAME=wmode VALUE=transparent> <PARAM NAME=bgcolor VALUE=#FFFFFF>'+
'<PARAM NAME=flashvars VALUE="points=141690,5485&lang=ru&um=00000">'+
'<EMBED src="http://rp5.ru/informer/group/1/16.swf" quality=high scale=noscale salign=LT wmode=transparent'+
'bgcolor=#FFFFFF WIDTH="160" HEIGHT="113" NAME="loader" flashvars="points=141690,5485&lang=ru&um=00000" ALIGN=""'+
'TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT>'];

slide_text.innerHTML = text[0];

var n = 1;
time = 800;
play = setInterval("chgImg()", 4000);

function chgImg() {
    slide_text.innerHTML = text[n];
    n++;
    if (n>=text.length) n = 0;
}
</script>

[PTslawa681]

Огромное спасибо за помощь!!!
Возможно сделать ещё и в виде карусели как здесь: exsoft.ucoz.com/load/skripty_dlja_ucoz/karusel_iz_kartinok/1-1-0-16

Заранее благодарен.

[Admin]

Нет, т.к. там используются простые изображения.

[Admin]

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

Код целиком:

Код:

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

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

<script type="text/javascript">
var imgs = ["image/img_1.png","image/img_2.png","image/img_3.png","image/img_4.png"];
var url = ["index.php","script.php","trick.php","forum/index.php"];
var text = ['Картинка 1','Картинка 2','<font color="red">Картинка 3</font>','Картинка 4'];
var n = 0;
time = 800;
play = setInterval("chgImg(0)", 4000);

function chgImg(number) {
if (number!=0) n = number - 2;
$('#slide_url').fadeOut(time, function() {
    $(this).attr({"href":url[n]});
    $('#slide_show').attr("src", imgs[n]);
    $('#slide_text').html(text[n]);
}).fadeIn(time);

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

[serg]

Здравствуйте. У меня имеется вот такой код смены картинок.

Код:

<script type="text/javascript">
<!--

//specify interval between slide (in mili seconds)
var slidespeed=3000

//specify images
var slideimages=new Array("http://xaoc34rus.ucoz.ru/kartinki/li4noe/fantazy1.jpg",
"http://xaoc34rus.ucoz.ru/kartinki/li4noe/fantazy2.jpg",
"http://xaoc34rus.ucoz.ru/kartinki/li4noe/mishka1600x800.jpg")

//specify corresponding links
var slidelinks=new Array("ЗДЕСЬ ССЫЛКА ОТКРЫТИЯ ПРИ НАЖАТИИ НА ФОТО","ЗДЕСЬ ССЫЛКА ОТКРЫТИЯ ПРИ НАЖАТИИ НА ФОТО","ЗДЕСЬ ССЫЛКА ОТКРЫТИЯ ПРИ НАЖАТИИ НА ФОТО")

var newwindow=1 //open links in new window? 1=yes, 0=no

var imageholder=new Array()
var ie=document.all
for (i=0;i<slideimages.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}

function gotoshow(){
if (newwindow)
window.open(slidelinks[whichlink])
else
window.location=slidelinks[whichlink]
}

//-->
</script>
<a href="javascript:gotoshow()"><img src="al1.gif" name="slide" border=0 style="filter:blendTrans(duration=3)" width=600 height=800></a>

<script type="text/javascript">
<!--

var whichlink=0
var whichimage=0
var blenddelay=(ie)? document.images.slide.filters[0].duration*1000 : 0
function slideit(){
if (!document.images) return
if (ie) document.images.slide.filters[0].apply()
document.images.slide.src=imageholder[whichimage].src
if (ie) document.images.slide.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setTimeout("slideit()",slidespeed+blenddelay)
}
slideit()

//-->
</script>

Хотел бы создать два, либо три блока со сменной картинок на одной странице именно с данным скриптом. Создал первый блок с картинками и ссылками. Он хорошо работает. Создал второй блок с картинками и ссылками и он уже не работает. Можете помочь мне так чтобы и первый и второй и последующие блоки смены картинок работали. Заранее благодарен.

[Admin]

Тут придется практически все менять... Позже попробую что-нибудь придумать.