JavaScript Скользящая фотогалерея
|
|
| Дата: Четверг, 22.10.2009, 14:01 | Сообщение # 1 |
Группа: Администраторы
Сообщений: 1530
| <style> img {position:absolute;} body {overflow:hidden;} </style> <div id=div1>1</div> <script> div1.style.display='none'; var idd=0; var d=0; var w=150; //размер картинки var tm=100; for(i=1;i<13;i++) { for(ii=1;ii<6;ii++) { idd++; if(idd<9) {reend2(i,ii);} } } //динамически создаем картинки function reend2(i,ii) { var imge=document.body.appendChild(document.createElement("IMG")); imge.src=idd+".jpg"; //создаем картинки с адресами 1..8.jpg imge.height=w; imge.width=w; imge.id="pic"+idd; imge.style.left=(idd-1)*w; imge.alt="pic"+idd+" Place your picture here"; } var d2=d+1*w; var d3=d+2*w; var d4=d+3*w; var d5=d+4*w; var d6=d+5*w; var d7=d+6*w; var d8=d+7*w; var sd=150;//величина ухода за край var v=3; //величина смещения function move() { d-=v;d2-=v;d3-=v;d4-=v;d5-=v;d6-=v;d7-=v;d8-=v; pic1.style.left=d; if(d<-sd) {d=d+8*w;} pic2.style.left=d2; if(d2<-sd) {d2=d2+8*w;} pic3.style.left=d3; if(d3<-sd) {d3=d3+8*w;} pic4.style.left=d4; if(d4<-sd) {d4=d4+8*w;} pic5.style.left=d5; if(d5<-sd) {d5=d5+8*w;} pic6.style.left=d6; if(d6<-sd) {d6=d6+8*w;} pic7.style.left=d7; if(d7<-sd) {d7=d7+8*w;} pic8.style.left=d8; if(d8<-sd) {d8=d8+8*w;} } var t= setInterval("move()",tm); </script> ------------------------------------- Пример скрипта: http://kachay.ucoz.org/load/27-1-0-161
|
|
| |
| Дата: Понедельник, 25.10.2010, 09:43 | Сообщение # 2 |
Группа: Пользователи
Сообщений: 2
| Здравствуйте! Очень хочу поставить на сайт Скользящую фотогалерею. Но есть "НО". Я, (старая вешалка), не могу разобраться как прописать картинки. Мне кажется уже по всякому пробовала. Если не сложно подскажите пожалуйста. За ранее спасибо.
|
|
| |
| Дата: Понедельник, 25.10.2010, 10:05 | Сообщение # 3 |
Группа: Администраторы
Сообщений: 1530
| Картинки прописывать нигде не надо. Просто готовые картинки(8шт.) надо разместить в той же директории(папке), где находится сама страница с этим скриптом под именами 1.jpg, 2.jpg, 3.jpg и т.д.
|
|
| |
| Дата: Понедельник, 25.10.2010, 11:42 | Сообщение # 4 |
Группа: Пользователи
Сообщений: 2
| Спасибо огромное
|
|
| |
| Дата: Четверг, 07.04.2011, 22:22 | Сообщение # 5 |
Группа: Гости
| А если данный скрипт нужно применить к нескольким страницам, на каждой из которых разные картинки. То какие имена присваивать и как прописывать следующие картинки?
|
|
| |
| Дата: Четверг, 07.04.2011, 23:23 | Сообщение # 6 |
Группа: Администраторы
Сообщений: 1530
| Думаю, что-то вроде: imge.src="pic2"+idd+".jpg"; //создаем картинки с адресами 1..8.jpg то есть на другой странице присваиваем переменной imge другие картинки
|
|
| |
| Дата: Суббота, 09.04.2011, 21:07 | Сообщение # 7 |
Группа: Гости
| Подскажите пожалуйста, а если картинки необходимо назвать по другому, то как это в скрипте прописать, или возможны только имена-цифры от 1 до 8?
|
|
| |
| Дата: Суббота, 09.04.2011, 23:00 | Сообщение # 8 |
Группа: Администраторы
Сообщений: 1530
| Создаем массив: var ar=new Array('название картинки1', 'название картинки2', ...) и подгружаем из него ar[i]
|
|
| |
| Дата: Пятница, 20.05.2011, 11:46 | Сообщение # 9 |
Группа: Гости
| Подскажите, плиз, как изменить высоту и ширину картинок по отдельности, а то в "var w=150; //размер картинки " она и по ширине и по высоте одинакова? Добавлено (20.05.2011, 11:37) --------------------------------------------- "Подскажите, плиз, как изменить высоту и ширину картинок по отдельности, а то в "var w=150; //размер картинки " она и по ширине и по высоте одинакова? " Этот вопрос решил. Подскажите, пожалуйста, как пробел между картинок сделать? Добавлено (20.05.2011, 11:46) --------------------------------------------- И еще хотелось бы скорость прокрутки редактировать и чтоб при наведении на изображение, прокрутка останавливалась? Подскажите. плиз...
|
|
| |
| Дата: Суббота, 21.05.2011, 14:43 | Сообщение # 10 |
Группа: Администраторы
Сообщений: 1530
| Если хотите произвольно работать с картинками, двигайте не картинки, а элементы Div. А в них уже вставляйте картинки. Чтобы останавливать движение, пропишите в функции "move" условие, как вести себя если мышка находится поверх элементов движения.
|
|
| |
| Дата: Четверг, 26.05.2011, 10:11 | Сообщение # 11 |
Группа: Гости
| "Если хотите произвольно работать с картинками, двигайте не картинки, а элементы Div. А в них уже вставляйте картинки. Чтобы останавливать движение, пропишите в функции "move" условие, как вести себя если мышка находится поверх элементов движения. "
Не могли бы Вы мне помочь? что прописывать в move и как поправить данный код, чтоб двигались div, а не картинки? Заранее, спасибо.
|
|
| |
| Дата: Четверг, 26.05.2011, 22:12 | Сообщение # 12 |
Группа: Администраторы
Сообщений: 1530
| к сожалению, нет на это времени из-за большой загруженности по работе (
|
|
| |