JavaScript Скользящая фотогалерея

S7
На сайте с 20.11.2009
Offline
33
843

Ребят, подскажите, плиз, как у данной фотогалерее сделать чтоб при наведении на фото прокрутка останавливалась? Заранее спасибо.

........................................................

Код

........................................................

<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=347;//размер картинки

var h=224;//размер картинки

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=h;

imge.width=w;

imge.id="pic"+idd;

imge.style.right=(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=347;//величина ухода за край

var v=3; //величина смещения

function move() {

d-=v;d2-=v;d3-=v;d4-=v;d5-=v;d6-=v;d7-=v;d8-=v;

pic1.style.right=d; if(d<-sd) {d=d+8*w;}

pic2.style.right=d2; if(d2<-sd) {d2=d2+8*w;}

pic3.style.right=d3; if(d3<-sd) {d3=d3+8*w;}

pic4.style.right=d4; if(d4<-sd) {d4=d4+8*w;}

pic5.style.right=d5; if(d5<-sd) {d5=d5+8*w;}

pic6.style.right=d6; if(d6<-sd) {d6=d6+8*w;}

pic7.style.right=d7; if(d7<-sd) {d7=d7+8*w;}

pic8.style.right=d8; if(d8<-sd) {d8=d8+8*w;}

}

var t= setInterval("move()",tm);

</script>

[Удален]
#1

Ну, если Вы хотите непременно с этим скриптом, то нужно создать обработчиков для событий onMouseOver и onMouseOut над картинкой, которые должны ставить флаг типа drive_images в значение true и false соответственно. И в начале определения функции move добавить проверку флага. Что-то вроде

if (!window.drive_images) return false;//если нет флага, ничего не двигать
S7
На сайте с 20.11.2009
Offline
33
#2

а поподробнее можно?)

[Удален]
#3

Честно говоря, у Вас весь скрипт - это какое-то сплошное недоразумение. Вместо того, чтобы двигать один контейнер с картинками, у Вас по отдельности двигается 8 картинок (причём скрипт тупо заточен именно под 8, ни добавить, ни отнять без переписывания функции движения не получится). И это учитывая, что картинки двигаются в одном направлении, абсолютно синхронно, и величина смещения для всех постоянная.

Поищите готовые решения на флэш или jQuery - очень приглядная анимация, и настраивается гибко.

А если хотите обработчика, то в самом начале скрипта добавляете

//ставим первоначальный флаг, разрешающий движение
drive_images = true;

Потом:

//Добавляем один и тот же обработчик на два события - mouseover и mouseout - в конец функции reend2()

imge.onmouseover = imge.onmouseout = function() {
drive_images = !drive_images;//обработчик меняет флаг, разрешающий движение галереи, на противоположный
}

И последнее:

//В функции move() проверяем флаг перед тем, как что-то делать
if (!window.drive_images) return false;//если нет флага, ничего не двигать

Получается

<style>
img {position:absolute;}
body {overflow:hidden;}
</style>

<div id=div1>1</div>

<script>
div1.style.display='none';

//ставим первоначальный флаг, разрешающий движение
drive_images = true;

var idd=0;
var d=0;
var w=347;//размер картинки
var h=224;//размер картинки
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=h;
imge.width=w;
imge.id="pic"+idd;
imge.style.right=(idd-1)*w;
imge.alt="pic"+idd+" Place your picture here";


//Добавляем один и тот же обработчик на два события - mouseover и mouseout - в конец функции reend2()
//обработчик меняет флаг, разрешающий движение галереи, на противоположный
imge.onmouseover = imge.onmouseout = function() {
drive_images = !drive_images;
}
}

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=347;//величина ухода за край
var v=3; //величина смещения



function move() {
//В функции move() проверяем флаг перед тем, как что-то делать
if (!window.drive_images) return false;//если нет флага, ничего не двигать

d-=v;d2-=v;d3-=v;d4-=v;d5-=v;d6-=v;d7-=v;d8-=v;
pic1.style.right=d; if(d<-sd) {d=d+8*w;}
pic2.style.right=d2; if(d2<-sd) {d2=d2+8*w;}
pic3.style.right=d3; if(d3<-sd) {d3=d3+8*w;}
pic4.style.right=d4; if(d4<-sd) {d4=d4+8*w;}
pic5.style.right=d5; if(d5<-sd) {d5=d5+8*w;}
pic6.style.right=d6; if(d6<-sd) {d6=d6+8*w;}
pic7.style.right=d7; if(d7<-sd) {d7=d7+8*w;}
pic8.style.right=d8; if(d8<-sd) {d8=d8+8*w;}
}
var t= setInterval("move()",tm);

function switch_driving () {
drive_images = !drive_images;
}

</script>
S7
На сайте с 20.11.2009
Offline
33
#4

Спасибо за помощь!

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий