X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Смена нескольких изображений
electronic
electronic
Topic Starter сообщение 7.11.2008, 14:14; Ответить: electronic
Сообщение #1


Здравствуйте! Подскажите пожалуйста где посмотреть или как написать скрипт (сам я найти не смог), который бы делал следующее:
Например есть 20 изображений. На странице отображается сразу несколько изображений (в зависимости от задачи их число меняется, т.е. скипт не должен быть привязан к какому-то определённому количеству). Пусть для примера это будет 3 изображения на странице. При нажатии на кнопку (не обязательно "объект" кнопка, может это будет изображение, вообщем просто событие onclick) "Далее" первое изображение заменяется вторым, второе третьим, а третье четвертым. И так с каждым нажатием прокручивается по кругу. Когда даходит до последнего, то все начинается с начала. Т.е. цикл этот не заканчивается. С кнопкой "назад" все тоже, только в другую сторону.
Спасибо за помощь.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Galen
Galen
сообщение 7.11.2008, 14:32; Ответить: Galen
Сообщение #2


Заведите в скрипте 3 переменных (img1, img2, img3), в которых будете хранить имена картинок, в данный момент отображаемых на странице. По onclick, вы меняете значения переменных по тому правилу что вы описали, а img3 задаёте имя новой картинки. Тот же принцип и для обратной прокрутки.
Хорошо бы что бы имена картинок подчинялись какой-то системе, для простоты скрипта.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
electronic
electronic
Topic Starter сообщение 7.11.2008, 15:08; Ответить: electronic
Сообщение #3


Я пытался сделать пока только для прокрутки в одну сторону:

<script language = "JavaScript">


var numimg=0

imgslide=new Array ()
imgslide[0]=new Image ()
imgslide[1]=new Image ()
imgslide[2]=new Image ()
imgslide[3]=new Image ()
imgslide[4]=new Image ()

imgslide[0].src ="images/Proba1.jpg"
imgslide[1].src ="images/Proba2.jpg"
imgslide[2].src ="images/Proba3.jpg"
imgslide[3].src ="images/Proba4.jpg"
imgslide[4].src ="images/Proba5.jpg"


function dem(n)

{
if (n==1)
{ numimg++
if (numimg==3)
numimg=0;
}
document.getElementById('imgproba1').src=imgslide [numimg].src;
document.getElementById('imgproba2').src=imgslide [numimg+1].src;
document.getElementById('imgproba3').src=imgslide [numimg+2].src;
}

</script>
<div class="widthall" >
<img src="images/Proba1.jpg" Id="imgproba1" alt="" width="80" height="80" border="1" />
<img src="images/Proba2.jpg" Id="imgproba2" alt="" width="80" height="80" border="1" />
<img src="images/Proba3.jpg" Id="imgproba3" alt="" width="80" height="80" border="1" />
<img src="images/Next_butt.gif" alt="" onclick="dem(1); return false"/>
</div>
Все работает пока не доходит до последней картинки, происходит не плавный возврат к началу,а сразу же скачок через несколько номеров. Первая картинка сразу же становится первой, а не третьей. Но это видно и по коду, не доработка на лицо. А вот как сделать, чтобы все работало нормально я додуматься что-то не могу.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pomp
pomp
сообщение 7.11.2008, 15:10; Ответить: pomp
Сообщение #4


electronic может проще галерейку скачать с прокруткой?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
electronic
electronic
Topic Starter сообщение 7.11.2008, 15:53; Ответить: electronic
Сообщение #5


Может и проще, если подскажете где, буду благодарен. Только я все что видел - там большое изображение меняется в зависимости от того, какое ты выбрал в полосе прокрутки + красивые эффекты. Или как-то все по хитрому сделано, слишком сложно. А мне надо просто чтоб они крутились и все.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Galen
Galen
сообщение 7.11.2008, 18:26; Ответить: Galen
Сообщение #6


Вот доработал ваш скрипт:
<script type="text/javascript">
<!--
var numimg = 0;

var imgslide=new Array();
imgslide[0]=new Image();
imgslide[1]=new Image();
imgslide[2]=new Image();
imgslide[3]=new Image();

imgslide[0].src ="q1.gif";
imgslide[1].src ="q2.gif";
imgslide[2].src ="q3.gif";
imgslide[3].src ="q4.gif";

function dem(flag) {
if(flag) {
numimg++;
if(numimg == 4) numimg = 0;
} else {
numimg--;
if(numimg <= 0) numimg = 4;
}

document.getElementById('imgproba1').src = imgslide[numimg%4].src;
document.getElementById('imgproba2').src = imgslide[(numimg+1)%4].src;
document.getElementById('imgproba3').src = imgslide[(numimg+2)%4].src;
}
--
>
</script>

<div class="widthall" >
<a href="#" onclick="dem(false); return false">Назад</a>
<img src="q1.gif" Id="imgproba1" alt="" width="80" height="80" border="1" />
<img src="q2.gif" Id="imgproba2" alt="" width="80" height="80" border="1" />
<img src="q3.gif" Id="imgproba3" alt="" width="80" height="80" border="1" />
<a href="#" onclick="dem(true); return false">Вперёд</a>
</div>
Надеюсь понятно что откуда берётся. Там есть одно неудобство: если сразу после загрузки страницы нажать "Назад", картинки не сменятся. А так всё вроде работает.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
electronic
electronic
Topic Starter сообщение 8.11.2008, 12:40; Ответить: electronic
Сообщение #7


Большое спасибо! Вы очень помогли! Все работает как надо.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыОптимизация WebP Изображений
41 ALESHAONLINE 3973 10.10.2020, 11:44
автор: jartalk
Открытая тема (нет новых ответов) Смена темы на WordPress без входа в админку?
7 Telnor 385 28.9.2020, 10:47
автор: Telnor
Открытая тема (нет новых ответов) [ PROXYMONSTER.RU ] - аренда мобильных прокси от 1 дня, изменение интервала, ручная смена IP, партнерская программа!
прокси
0 resoos 437 26.9.2020, 21:56
автор: resoos
Открытая тема (нет новых ответов) Смена темы на WordPress без входа в админку?
0 Zevss 291 24.9.2020, 11:53
автор: Zevss
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыЛичный фотосток, много бесплатных изображений
15 Ultrastalker 2021 30.3.2020, 10:15
автор: Ultrastalker


 



RSS Текстовая версия Сейчас: 30.11.2020, 3:10
Дизайн