Каскадный режим | Линейный режим

***Admin*** · 01.11.2012 12:17:04

Данная темя является логическим продолжением обсуждения темы Автоматическая смена изображений и подписей к ним.
Т.к. комментарии к данной теме стали довольно объемными, для удобства приведения больших кодов, было принято решение перенести дальнейшее обсуждение на форум.

01.11.2012 в 13:04:46 поступил комментарий от пользователя Ольга:

Цитата:Добрый день, работает не корректно. Если я нажимаю на какой-либо из переключателей, то активируется на порядок ниже или выше картинка (в зависимости с какой стороны от активного в данный момент переключателя нажимаю).
Привожу весь скрипт:
<script type="text/javascript">
all_images = new Array ("image/img_1.png", "image/img_2.png", "image/img_3.png", "image/img_4.png");
all_text = new Array (
"<h2>облако</h2><h3>облако</h3><p>облако</p><p><a href='news/8_2012_1/index.html'><h4>подробнее...</h4></a></p>",
"<h2>трава</h2><h3>трава</h3><p>трава</p><p><a href='news/mn_2012_1/index.html'><h4>подробнее...</h4></a></p>",
"<h2>земля</h2><h3>земля</h3><p>земля</p><p><a href='news/2_2012_1/index.html'><h4>подробнее...</h4></a></p>",
"<h2>небо</h2><h3>небо</h3><p>небо</p><p><a href='news/12_2011_1/index.html'><h4>подробнее...</h4></a></p>");
var ImgNum = 0;
var ImgLength = all_images.length - 1;
var delay = 5000;
var lock = false;
var run;

function chgImg(direction, set_img) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) { ImgNum = 0; }
if (ImgNum < 0) { ImgNum = ImgLength; }
document.slide_show.src = all_images[ImgNum];
if (document.layers) {
document.layers.slide_show_text.document.write(all_text[ImgNum]);
document.layers.slide_show_text.document.close();
}
else slide_show_text.innerHTML = all_text[ImgNum];
}
mess='';
for (i=1; i<=ImgLength+1; ++i) {
if (i!=ImgNum+1) {
mess+=' <a style="color:red;" href="jchgImg('+i+',true)"><img src="/images/dot-med-orange.png"></a> ';
}
else mess+='<span style="color:gray;"><img src="/images/dot-med-white.png"></span>';

if (document.layers) {
document.layers.switch_text.document.write(mess);
document.layers.switch_text.document.close();
}
else switch_text.innerHTML = mess;
}
}

function auto() {
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
}
}
</script>

<div id="news-teaser">
<table border="0" width="100%">
<tr align="center">
<td colspan="8" width="60%"><img src="image/img_1.png" name="slide_show"></td>
<td colspan="8" align="right" width="40%"><span id="slide_show_text"><h2>облако</h2>
<h3>облако</h3>
<p>облако</p>
<a href="/news/8_2012_1/" class="more">подробнее...</a>
</span></td></tr>
<tr align="center">
<td width="7%"> </td>
<td width="7%"> </td>
<td width="7%"> </td>
<td width="7%"> </td>
<td width="7%"> </td>
<td width="7%"> </td>
<td width="7%"> </td>
<td width="11%"> </td>
<td width="6%"> </td>
<td width="6%"> </td>
<td width="6%"> </td>
<td width="6%"> </td>
<td width="16%"><span id="switch_text">
<table><tr>
<td width="25%"><a href="jchgImg(1,true)"><img src="/images/dot-med-white.png"></a></td>
<td width="25%"><a href="jchgImg(2,true)"><img src="/images/dot-med-orange.png"></a></td>
<td width="25%"><a href="jchgImg(3,true)"><img src="/images/dot-med-orange.png"></a></td>
<td width="25%"><a href="jchgImg(4,true)"><img src="/images/dot-med-orange.png"></a></td></tr></table></span></td>
</tr>
</table>
</div>

Подскажите, пожалуйста, где ошибка?

***Admin*** · 01.11.2012 12:22:48

Ольга, в четвертом комментарии был дан ответ о том, что надо заменить.

В Вашем случае, функция chgImg(){} должна выглядеть так:

Код:

function chgImg(direction, set_img) {

 if (document.images) {

  if (set_img==true) ImgNum = direction-1;

  else ImgNum = ImgNum + direction;

  if (ImgNum > ImgLength) { ImgNum = 0; }

  if (ImgNum < 0) { ImgNum = ImgLength; }

  document.slide_show.src = all_images[ImgNum];

  if (document.layers) {

   document.layers.slide_show_text.document.write(all_text[ImgNum]);

   document.layers.slide_show_text.document.close();

  }

  else slide_show_text.innerHTML = all_text[ImgNum];

 }

mess='';

for (i=1; i<=ImgLength+1; ++i) {

 if (i!=ImgNum+1) {

 mess+=' <a style="color:red;" href="javascript:chgImg('+i+',true)"><img src="/images/dot-med-orange.png"></a> ';

 }

 else mess+='<span style="color:gray;"><img src="/images/dot-med-white.png"></span>';

 if (document.layers) {

  document.layers.switch_text.document.write(mess);

  document.layers.switch_text.document.close();

 }

 else switch_text.innerHTML = mess;

}

}

Во избежание ошибок, скопируйте функцию целиком себе.
В строчке if (set_img==true) ImgNum = direction-1; мы как раз делаем поправку на сдвиг.

otrusova · 06.11.2012 15:29:25

Добрый день, благодарю, все работает прекрасно. Хотелось бы еще смену изображений самих сделать плавнее. Подскажите, как это сделать, пожалуйста.

***Admin*** · 06.11.2012 19:10:48

Если я правильно понял, то Вы хотите примерно такую смену изображений - http://usefulscript.ru/change_of_image.php плюс смену подписей к ним.

Подумаю, как объединить эти два скрипта. Scratch

otrusova · 07.11.2012 10:16:14

(06.11.2012 19:10:48)Admin писал(а): Если я правильно понял, то Вы хотите примерно такую смену изображений - http://usefulscript.ru/change_of_image.php плюс смену подписей к ним.

Подумаю, как объединить эти два скрипта.

Да, все правильно. Очень резкая смена изображений, хотелось бы плавнее. Плюс тоже самое к подписям.

***Admin*** · 07.11.2012 19:50:22

Все понял.

Объединить два скрипта нормально не получилось, потому сегодня перешел на jQuery.

Думаю, вариант реализации на jQuery Вас устроит и даже обрадует. Wink

Через пару часов выложу в виде новой темы на сайте, ссылку тут тоже поставлю.

P.S. Готово. Ссылка - Плавная смена изображений на jQuery

otrusova · 19.11.2012 15:27:43

(07.11.2012 19:50:22)Admin писал(а): Все понял.

Объединить два скрипта нормально не получилось, потому сегодня перешел на jQuery.

Думаю, вариант реализации на jQuery Вас устроит и даже обрадует.
Через пару часов выложу в виде новой темы на сайте, ссылку тут тоже поставлю.

P.S. Готово. Ссылка - Плавная смена изображений на jQuery

Добрый день Smile

вариант с jQuerty не получился (но все равно огромное спасибо! Подскажите, пожалуйста, как в первом варианте сделать картинки активными? Чтобы при нажатии на картинку image/img_1.png происходил переход на 'news/8_2012_1/index.html', image/img_2.png на 'news/mn_2012_1/index.html', image/img_3.png на 'news/2_2012_1/index.html', image/img_4.png на 'news/12_2011_1/index.html'. Спасибо.

Код:

<script type="text/javascript">

all_images = new Array (

"image/img_1.png",

"image/img_2.png",

"image/img_3.png",

"image/img_4.png");

all_text = new Array (

"<h2>облако</h2><h3>облако</h3><p>облако</p><p><a href='news/8_2012_1/index.html'><h4>подробнее...</h4></a></p>",

"<h2>трава</h2><h3>трава</h3><p>трава</p><p><a href='news/mn_2012_1/index.html'><h4>подробнее...</h4></a></p>",

"<h2>земля</h2><h3>земля</h3><p>земля</p><p><a href='news/2_2012_1/index.html'><h4>подробнее...</h4></a></p>",

"<h2>небо</h2><h3>небо</h3><p>небо</p><p><a href='news/12_2011_1/index.html'><h4>подробнее...</h4></a></p>");

var ImgNum = 0;

var ImgLength = all_images.length - 1;

var delay = 5000;

var lock = false;

var run;

function chgImg(direction, set_img) {

if (document.images) {

  if (set_img==true) ImgNum = direction-1;

  else ImgNum = ImgNum + direction;

  if (ImgNum > ImgLength) { ImgNum = 0; }

  if (ImgNum < 0) { ImgNum = ImgLength; }

  document.slide_show.src = all_images[ImgNum];

  if (document.layers) {

   document.layers.slide_show_text.document.write(all_text[ImgNum]);

   document.layers.slide_show_text.document.close();

  }

  else slide_show_text.innerHTML = all_text[ImgNum];

}

mess='';

for (i=1; i<=ImgLength+1; ++i) {

if (i!=ImgNum+1) {

mess+=' <a style="color:orange;" href="javascript:chgImg('+i+',true)"><img src="/images/dot-med-orange-right.png"></a> ';

}

else mess+='<span style="color:white;"><img src="/images/dot-med-white-right.png"></span>';

if (document.layers) {

  document.layers.switch_text.document.write(mess);

  document.layers.switch_text.document.close();

}

else switch_text.innerHTML = mess;

}

}

function auto() {

 if (lock == true) {

  lock = false;

  window.clearInterval(run);

 }

 else if (lock == false) {

  lock = true;

  run = setInterval("chgImg(1)", delay);

 }

}

</script>

<div id="news-teaser">

 <table border="0" width="100%">

  <tr align="center">

   <td colspan="8" width="60%"><img src="image/img_1.png" name="slide_show"></td>

   <td colspan="8" align="right" width="40%"><span id="slide_show_text"><h2>облако</h2>

<h3>облако</h3>

<p>облако</p>

<a href="/news/8_2012_1/" class="more">подробнее...</a>

</span></td></tr>

<tr>

   <td colspan="8">&nbsp;</td>

   <td colspan="4">&nbsp;</td>

   <td colspan="4" align="right"><span id="switch_text">

<table align="right"><tr>

    <td><a href="javascript:chgImg(1,true)"><img src="/images/dot-med-white-right.png"></a></td>

   <td><a href="javascript:chgImg(2,true)"><img src="/images/dot-med-orange-right.png"></a></td>

   <td><a href="javascript:chgImg(3,true)"><img src="/images/dot-med-orange-right.png"></a></td>

   <td><a href="javascript:chgImg(4,true)"><img src="/images/dot-med-orange-right.png"></a></td></tr></table></span></td>

  </tr>

 </table>

</div>

***Admin*** · 19.11.2012 18:13:33

Извините, сейчас нету времени написать скрипт целиком, но могу сказать, как это нужно делать.

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

После строчки document.slide_show.src = all_images[ImgNum]; добавляем
document.slide_show_url.href = all_href[ImgNum];
где all_href - массив URL адресов для переходов.

А само изображение помещаем между тегами <a></a> с именем slide_show_url:
<a href="index.php" name="slide_show_url"><img src="image/img_1.png" name="slide_show"></a>

Как то так.

otrusova · 19.11.2012 22:56:57

Добрый день, прошу прощения, но ничего не получается. Вроде делаю, как вы написали. Посмотрите, пожалуйста.

Код:

<script type="text/javascript">

all_images = new Array (

"image/img_1.png",

"image/img_2.png",

"image/img_3.png",

"image/img_4.png");

all_text = new Array (

"<h2>облако</h2><h3>облако</h3><p>облако</p><p><a href='news/8_2012_1/index.html'><h4>подробнее...</h4></a></p>",

"<h2>трава</h2><h3>трава</h3><p>трава</p><p><a href='news/mn_2012_1/index.html'><h4>подробнее...</h4></a></p>",

"<h2>земля</h2><h3>земля</h3><p>земля</p><p><a href='news/2_2012_1/index.html'><h4>подробнее...</h4></a></p>",

"<h2>небо</h2><h3>небо</h3><p>небо</p><p><a href='news/12_2011_1/index.html'><h4>подробнее...</h4></a></p>");

slide_show_url:

<a href="news/8_2012_1/index.html" name="slide_show_url"><img src="image/img_1.png" name="slide_show"></a>

<a href="news/mn_2012_1/index.html" name="slide_show_url"><img src="image/img_1.png" name="slide_show"></a>

<a href="news/2_2012_1/index.html" name="slide_show_url"><img src="news/12_2011_1/index.html" name="slide_show"></a>

<a href="news/8_2012_1/index.html" name="slide_show_url"><img src="image/img_1.png" name="slide_show"></a>

var ImgNum = 0;

var ImgLength = all_images.length - 1;

var delay = 5000;

var lock = false;

var run;

function chgImg(direction, set_img) {

if (document.images) {

  if (set_img==true) ImgNum = direction-1;

  else ImgNum = ImgNum + direction;

  if (ImgNum > ImgLength) { ImgNum = 0; }

  if (ImgNum < 0) { ImgNum = ImgLength; }

  document.slide_show.src = all_images[ImgNum];

  document.slide_show_url.href = all_href[ImgNum];  

  if (document.layers) {

   document.layers.slide_show_text.document.write(all_text[ImgNum]);

   document.layers.slide_show_text.document.close();

  }

  else slide_show_text.innerHTML = all_text[ImgNum];

}

mess='';

for (i=1; i<=ImgLength+1; ++i) {

if (i!=ImgNum+1) {

mess+=' <a style="color:orange;" href="javascript:chgImg('+i+',true)"><img src="/images/dot-med-orange-right.png"></a> ';

}

else mess+='<span style="color:white;"><img src="/images/dot-med-white-right.png"></span>';

if (document.layers) {

  document.layers.switch_text.document.write(mess);

  document.layers.switch_text.document.close();

}

else switch_text.innerHTML = mess;

}

}

function auto() {

 if (lock == true) {

  lock = false;

  window.clearInterval(run);

 }

 else if (lock == false) {

  lock = true;

  run = setInterval("chgImg(1)", delay);

 }

}

</script>

<div id="news-teaser">

 <table border="0" width="100%">

  <tr align="center">

   <td colspan="8" width="60%"><a href="news/8_2012_1/index.html" name="slide_show_url"><img src="image/img_1.png" name="slide_show"></a></td>

   <td colspan="8" align="right" width="40%"><span id="slide_show_text"><h2>облако</h2>

<h3>облако</h3>

<p>облако</p>

<a href="/news/8_2012_1/" class="more">подробнее...</a>

</span></td></tr>

<tr>

   <td colspan="8">&nbsp;</td>

   <td colspan="4">&nbsp;</td>

   <td colspan="4" align="right"><span id="switch_text">

<table align="right"><tr>

    <td><a href="javascript:chgImg(1,true)"><img src="/images/dot-med-white-right.png"></a></td>

   <td><a href="javascript:chgImg(2,true)"><img src="/images/dot-med-orange-right.png"></a></td>

   <td><a href="javascript:chgImg(3,true)"><img src="/images/dot-med-orange-right.png"></a></td>

   <td><a href="javascript:chgImg(4,true)"><img src="/images/dot-med-orange-right.png"></a></td></tr></table></span></td>

  </tr>

 </table>

</div>

***Admin*** · 19.11.2012 23:13:16

Замените:

Код:

slide_show_url:

 <a href="news/8_2012_1/index.html" name="slide_show_url"><img src="image/img_1.png" name="slide_show"></a>

 <a href="news/mn_2012_1/index.html" name="slide_show_url"><img src="image/img_1.png" name="slide_show"></a>

 <a href="news/2_2012_1/index.html" name="slide_show_url"><img src="news/12_2011_1/index.html" name="slide_show"></a>

 <a href="news/8_2012_1/index.html" name="slide_show_url"><img src="image/img_1.png" name="slide_show"></a>

на:

Код:

all_href = new Array (

 "news/8_2012_1/index.html",

 "news/mn_2012_1/index.html",

 "news/2_2012_1/index.html",

 "news/8_2012_1/index.html");

Остальное вроде правильно добавили. И откуда у Вас взялась функция jchgImg?

Скиньте лучше URL странички в личку, завтра вечером погляжу.

Каскадный режим \| Линейный режим Автоматическая смена изображений и подписей к ним
Автор	Сообщение