Скрипт смены изображений при обновлении страницы.

Поделиться1Вт, 19 Фев 2013 22:52:48

Автор: Laktonika
Заслуженный
Зарегистрирован: Вс, 12 Дек 2010
Сообщений: 793
Уважение: +105
Позитив: +231
Последний визит:
Сегодня 07:57:00

Здравствуйте. Есть скрипт:

Код:

<script language="JavaScript">
<!--
var a=Math.round(Math.random()*3)
image = new Array();
image[0]="http://s2.uploads.ru/uKcRS.gif"
image[1]="http://s2.uploads.ru/6bfwU.gif"
image[2]="http://s3.uploads.ru/kjUh1.gif"
image[3]="http://s2.uploads.ru/8JnkV.gif"
document.write ("<img class='anim' src="+image[a]+">");
//-->
</script>

Можно сделать так, чтобы при каждом обновлении/смене страницы изображения отображались не рандомно, а по кругу?
И еще. Очень важная проблема.
Есть изображение, которое имеет определенные css-настройки (собственная позиция + изменения при наведении). Нужно, чтобы это изображение тоже отображалось по порядку в скрипте (первое в кругу).

Отредактировано Laktonika (Ср, 20 Фев 2013 00:13:13)

0

Поделиться2Ср, 20 Фев 2013 01:32:22

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51444
Уважение: +15410
Позитив: +12000
Последний визит:
Сегодня 02:32:50

<script language="JavaScript">
function setcookie(a,b,c) {if(c){var d = new Date();d.setTime(d.getTime()+c);}if(a && b) document.cookie = a+'='+b+(c ? '; expires='+d.toUTCString() : '');else return false;}
function getcookie(a) {var b = new RegExp(a+'=([^;]){1,}');var c = b.exec(document.cookie);if(c) c = c[0].split('=');else return false;return c[1] ? c[1] : false;}

image = new Array();
image[0]="http://s2.uploads.ru/uKcRS.gif"
image[1]="http://s2.uploads.ru/6bfwU.gif"
image[2]="http://s3.uploads.ru/kjUh1.gif"
image[3]="http://s2.uploads.ru/8JnkV.gif"

var NUM=getcookie('imgNUM');
if(NUM){NUM = (+NUM)%image.length;}
else NUM =0;
setcookie('imgNUM',NUM+1);
document.write ("<img class='anim' src="+image[NUM]+">");
</script>

Отредактировано Deff (Ср, 20 Фев 2013 01:57:41)

+2

Поделиться3Ср, 20 Фев 2013 16:29:34

Автор: Laktonika
Заслуженный
Зарегистрирован: Вс, 12 Дек 2010
Сообщений: 793
Уважение: +105
Позитив: +231
Последний визит:
Сегодня 07:57:00

Deff
http://pai.rusff.ru/

1. Можно первому изображению присвоить какой-нибудь класс (чтобы далее прописать ему стиль, а именно - маргины: сам видишь, картина висит неровно).
2. Первому изображению в кругу нужно прописать z-index, так как один из блоков на шапке перекрывает его, соответственно, посетитель не может навести курсор на эту картину (а надо: при наведении есть эффект).
3. Не буду повторяться о еще одной проблеме, только приведу ссылку: CSS3 анимация.

0

Поделиться4Ср, 20 Фев 2013 22:00:05

Автор: Кофеман
Заслуженный
Зарегистрирован: Ср, 2 Фев 2011
Сообщений: 1575
Уважение: +257
Позитив: +167
Пол: Мужской
Последний визит:
Пт, 1 Мар 2013 14:56:10

Laktonika
Мож я не понял, что нужно, но клас прописан внутри скрипта:

document.write ("<img class='anim' src="+image[NUM]+">");
</script>

Добавлено:
Я бы просто сделал картинки одинаковыми. У Вас все четыре картинки имеют разный размер: 386х215, 207х346б 273х346 и т.д. А если их все сделать 386х346? И первую картину внутри картинки спозиционировать?

Отредактировано Кофеман (Ср, 20 Фев 2013 22:05:51)

0

Поделиться5Чт, 21 Фев 2013 13:25:29

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51444
Уважение: +15410
Позитив: +12000
Последний визит:
Сегодня 02:32:50

Laktonika написал(а):

3. Не буду повторяться о еще одной проблеме, только приведу ссылку: CSS3 анимация.

Я не смог решить без скрипта, смог ток если первое движение будет дёрганным, последующие норма
Может проще гифку качающуюся сделать ? и смену статической картинки на gif при наведеннии ?

Отредактировано Deff (Чт, 21 Фев 2013 14:01:52)

0

Поделиться6Чт, 21 Фев 2013 14:10:45

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51444
Уважение: +15410
Позитив: +12000
Последний визит:
Сегодня 02:32:50

Laktonika написал(а):

1. Можно первому изображению присвоить какой-нибудь класс (чтобы далее прописать ему стиль, а именно - маргины: сам видишь, картина висит неровно).2. Первому изображению в кругу нужно прописать z-index, так как один из блоков на шапке перекрывает его, соответственно, посетитель не может навести курсор на эту картину (а надо: при наведении есть эффект).

<div id="anim0" style="position: absolute; margin-top: -401px; left: 0;">
<style>#anim0 img{display:none;}</style>
<img class="pendulum" src="http://s2.uploads.ru/lWywY.png" style="position:relative;z-index:100;" />
<img src="http://s2.uploads.ru/bQuny.gif" style="margin: 0 0 0 0" />
<img src="http://s2.uploads.ru/6bfwU.gif" style="margin: 0 0 0 0" />
<img src="http://s3.uploads.ru/UsEcV.gif" style="margin: 0 0 0 0" />
<img src="http://s3.uploads.ru/RQ21g.gif" style="margin: 0 0 0 0" />
</div>
<script language="JavaScript">
function setcookie(a,b,c) {if(c){var d = new Date();d.setTime(d.getTime()+c);}if(a && b) document.cookie = a+'='+b+(c ? '; expires='+d.toUTCString() : '');else return false;}
function getcookie(a) {var b = new RegExp(a+'=([^;]){1,}');var c = b.exec(document.cookie);if(c) c = c[0].split('=');else return false;return c[1] ? c[1] : false;}

var NUM=getcookie('imgNUM');
if(NUM){NUM = (+NUM)%$("#anim0>img").length;}
else NUM =0;
setcookie('imgNUM',NUM+1);
$("#anim0 img").eq(NUM).show();
</script>

Отредактировано Deff (Чт, 21 Фев 2013 15:45:41)

+1

Поделиться7Чт, 21 Фев 2013 15:33:25

Автор: Laktonika
Заслуженный
Зарегистрирован: Вс, 12 Дек 2010
Сообщений: 793
Уважение: +105
Позитив: +231
Последний визит:
Сегодня 07:57:00

Deff написал(а):

Я не смог решить без скрипта, смог ток если первое движение будет дёрганным,

А как скриптом смог?

0

Поделиться8Чт, 21 Фев 2013 15:51:31

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51444
Уважение: +15410
Позитив: +12000
Последний визит:
Сегодня 02:32:50

Laktonika написал(а):

в

Да ненамного лучше, имхо пока не-то всё

И исходный Вариант имхо луше был

@-moz-keyframes pendulum {
from { -moz-transform: rotate(0deg); }
50% { -moz-transform: rotate(7deg); }
to { -moz-transform: rotate(-7deg); }
}
@-webkit-keyframes pendulum {
from { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(7deg); }
to { -webkit-transform: rotate(-7deg); }
}
@keyframes pendulum {
from { transform: rotate(0deg); }
50% { transform: rotate(7deg); }
to { transform: rotate(-7deg); }
}

+1

Поделиться9Чт, 21 Фев 2013 15:56:55

Автор: Laktonika
Заслуженный
Зарегистрирован: Вс, 12 Дек 2010
Сообщений: 793
Уважение: +105
Позитив: +231
Последний визит:
Сегодня 07:57:00

Deff
Только что нашла решение, и анимация прилично выглядит. (:
Спасибо большое за помощь, скрипт исправно работает.

0

Поделиться10Чт, 21 Фев 2013 16:09:23

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51444
Уважение: +15410
Позитив: +12000
Последний визит:
Сегодня 02:32:50

Laktonika
Можно у Каждой картинке поставить класс или свой Id и повигать css ( позиция по стене - не совпадает

0

Поделиться11Чт, 21 Фев 2013 16:20:53

Автор: Laktonika
Заслуженный
Зарегистрирован: Вс, 12 Дек 2010
Сообщений: 793
Уважение: +105
Позитив: +231
Последний визит:
Сегодня 07:57:00

Deff
Слушай, а ты не знаешь, почему в хроме анимация с картинами не работает?
При таких кодах:

<style>
.pendulum:hover {
position: relative;
-moz-animation-name: pendulum;
-moz-animation-duration: 1s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-webkit-animation-name: pendulum;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-name: pendulum;
animation-duration: 1s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-direction: alternate;
}

@-moz-keyframes pendulum {
0% { transform: rotate(0deg); }
50% { transform: rotate(-2deg); }
100% { transform: rotate(2deg); }
}
@-webkit-keyframes pendulum {
0% { transform: rotate(0deg); }
50% { transform: rotate(-2deg); }
100% { transform: rotate(2deg); }
}
@keyframes pendulum {
0% { transform: rotate(0deg); }
50% { transform: rotate(-2deg); }
100% { transform: rotate(2deg); }
}
</style>

<div id="anim0" style="position: absolute; margin-top: -401px; left: 0;">
<style>#anim0 img{display:none;}</style>
<img class="pendulum" src="http://s2.uploads.ru/lWywY.png" style="position:relative;z-index:100; margin: 93px 0 0 0;" />
<img src="http://s2.uploads.ru/bQuny.gif" style="margin: 0 0 0 85px" />
<img src="http://s2.uploads.ru/6bfwU.gif" style="margin: 0 0 0 85px" />
<img src="http://s3.uploads.ru/UsEcV.gif" style="margin: 0 0 0 85px" />
<img src="http://s3.uploads.ru/RQ21g.gif" style="margin: 0 0 0 85px" />
</div>
<script language="JavaScript">
function setcookie(a,b,c) {if(c){var d = new Date();d.setTime(d.getTime()+c);}if(a && b) document.cookie = a+'='+b+(c ? '; expires='+d.toUTCString() : '');else return false;}
function getcookie(a) {var b = new RegExp(a+'=([^;]){1,}');var c = b.exec(document.cookie);if(c) c = c[0].split('=');else return false;return c[1] ? c[1] : false;}

var NUM=getcookie('imgNUM');
if(NUM){NUM = (+NUM)%$("#anim0>img").length;}
else NUM =0;
setcookie('imgNUM',NUM+1);
$("#anim0 img").eq(NUM).show();
</script>

В опере работает всё.

0

Поделиться12Чт, 21 Фев 2013 19:52:13

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51444
Уважение: +15410
Позитив: +12000
Последний визит:
Сегодня 02:32:50

Laktonika
Ти приставку не удаляй!
@-moz-keyframes pendulum {
from { -moz-transform: rotate(0deg); }
50% { -moz-transform: rotate(7deg); }
to { -moz-transform: rotate(-7deg); }
}
@-webkit-keyframes pendulum {
from { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(7deg); }
to { -webkit-transform: rotate(-7deg); }
}
@keyframes pendulum {
from { transform: rotate(0deg); }
50% { transform: rotate(7deg); }
to { transform: rotate(-7deg); }
}
Эт приставки для разных браузеров и версий( ну кроме ИЕ

Отредактировано Deff (Чт, 21 Фев 2013 19:52:56)

0

Поделиться13Чт, 21 Фев 2013 21:02:07

Автор: Laktonika
Заслуженный
Зарегистрирован: Вс, 12 Дек 2010
Сообщений: 793
Уважение: +105
Позитив: +231
Последний визит:
Сегодня 07:57:00

Deff
Черт, не углядела. Спасибо.

0

Поделиться14Пт, 22 Фев 2013 09:38:42

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51444
Уважение: +15410
Позитив: +12000
Последний визит:
Сегодня 02:32:50

Laktonika
Есть идея продлить картины прозрачкой - на ту же высоту вверх, тогда будет качаться как на гвозде
(*можн перекрыть прозрачку Выше "гвоздя" другой прозрачной картинкой, дабы не было эффекта наведения -качания на верхнюю добавку

+1

Единый форум поддержки

Меню навигации

Пользовательские ссылки

Информация о пользователе

Скрипт смены изображений при обновлении страницы.

Сообщений 1 страница 14 из 14

Поделиться1Вт, 19 Фев 2013 22:52:48

Поделиться2Ср, 20 Фев 2013 01:32:22

Поделиться3Ср, 20 Фев 2013 16:29:34

Поделиться4Ср, 20 Фев 2013 22:00:05

Поделиться5Чт, 21 Фев 2013 13:25:29

Поделиться6Чт, 21 Фев 2013 14:10:45

Поделиться7Чт, 21 Фев 2013 15:33:25

Поделиться8Чт, 21 Фев 2013 15:51:31

Поделиться9Чт, 21 Фев 2013 15:56:55

Поделиться10Чт, 21 Фев 2013 16:09:23

Поделиться11Чт, 21 Фев 2013 16:20:53

Поделиться12Чт, 21 Фев 2013 19:52:13

Поделиться13Чт, 21 Фев 2013 21:02:07

Поделиться14Пт, 22 Фев 2013 09:38:42