Znalazłem skrypt, który przesuwa obiekty na zasadzie 'marquee'.
Wygląda to mniej więcej tak jak tutaj:
http://blue.ovh.org/temp/marquee.html
Wszystko działa jak powinno, ale chciałbym zrobić pewną modyfikację i nie wiem jak.
Chciałbym, żeby po kliknięciu i najechaniu myszą na jakiś link/przycisk/obrazek kierunek przesuwania się zmienił na przeciwny. (Obrazki przesuwają się w lewo, klikam na strzałkę w prawo, wtedy zaczyna się przesuwać w prawo. Potem kiedy kliknę strzałkę w lewo to przesuwa się znowu w lewo, itd.)
Kod w java script:
CODE
<script type="text/javascript">
function marquee(x,typ,p){
typ={
'up':[-1,'top','offsetHeight'],
'down':[1,'top','offsetHeight'],
'left':[-1,'left','offsetWidth'],
'right':[1,'left','offsetWidth']
}[typ];
var m=this,mOut,mIn,turlaj,T,i=typ[0],j=0,p=p||30;
(mOut=document.getElementById(x)).onmouseover=function(){T=clearInterval(T)};
mOut.appendChild((mIn=mOut.childNodes)[0].cloneNode(1));
mOut.onmouseout=function(e){
e=e||event;e=e.toElement||e.relatedTarget;
if(e)do{if(e==this)return!1}while(e=e.parentNode)
T=setInterval(turlaj,p)
};
mOut=mIn[0][typ[2]];
turlaj=function(){
mIn[0].style[typ[1]]=(-2*i*(j+=i)<(i-1)*mOut?(j=(-i-1)/2*mOut+i):j)+'px';
mIn[1].style[typ[1]]=j+mOut+'px';
}
T=setInterval(turlaj,p);
}
</script>
function marquee(x,typ,p){
typ={
'up':[-1,'top','offsetHeight'],
'down':[1,'top','offsetHeight'],
'left':[-1,'left','offsetWidth'],
'right':[1,'left','offsetWidth']
}[typ];
var m=this,mOut,mIn,turlaj,T,i=typ[0],j=0,p=p||30;
(mOut=document.getElementById(x)).onmouseover=function(){T=clearInterval(T)};
mOut.appendChild((mIn=mOut.childNodes)[0].cloneNode(1));
mOut.onmouseout=function(e){
e=e||event;e=e.toElement||e.relatedTarget;
if(e)do{if(e==this)return!1}while(e=e.parentNode)
T=setInterval(turlaj,p)
};
mOut=mIn[0][typ[2]];
turlaj=function(){
mIn[0].style[typ[1]]=(-2*i*(j+=i)<(i-1)*mOut?(j=(-i-1)/2*mOut+i):j)+'px';
mIn[1].style[typ[1]]=j+mOut+'px';
}
T=setInterval(turlaj,p);
}
</script>
Kod z pliku php/html:
CODE
<div id="id_przewijaczki" style="position: relative; width:542px; height:364px; overflow: hidden;>
<div style="position: absolute;width:720px; height:364px;">
</div>
</div>
<script type="text/javascript">
new marqueee('id_przewijaczki','left',40);
</script>
<a href="#">w prawo</a>
<a href="#">w lewo</a>
<div style="position: absolute;width:720px; height:364px;">
</div>
</div>
<script type="text/javascript">
new marqueee('id_przewijaczki','left',40);
</script>
<a href="#">w prawo</a>
<a href="#">w lewo</a>
Pozdrawiam