Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   скроллер для картинок(посмотрите люди) (https://javascript.ru/forum/misc/7003-skroller-dlya-kartinok-posmotrite-lyudi.html)

bushstas 10.01.2010 16:21

скроллер для картинок(посмотрите люди)
 
написал своими силами скроллера для прокрутки изображений
не использующий колесико, может кому пригодится, все вроде более менее просто и тупо :)
<?php
$w=90; //ширина элементов для скроллинга (у меня картинки)
$h=90; //высота  элементов для скроллинга (у меня картинки)
$q=5;  //видимое количество элементов в скроллере
$qq=8; // общее количество элементов
$scroller_width=$w*$q; // ширина скроллера
?>

-----------------------------------------------------------------------
// html код скроллера
-----------------------------------------------------------------------
при наведении курсора определяем координату Х скроллера +
передаем необходимые параметры для вычислений
запускаем скроллер
определяем направление и скорость скроллинга
при потере фокуса мышью останавливаем скроллинг
фоном должна быть 100% прозрачная png иначе в IE не работает

<div id="scroller_container" onmouseover="find_out_coordinates('scroller_container',<?=$w?>,<?=$scroller_width?>,<?=$qq?>),start_scrollin()" onmousemove="scroller_cursor_position(event)" onmouseout="stop_scrolling()" style="position:absolute;z-index:101;left:200px;width:<?=$scroller_width?>px;height:<?=$h?>px;border:1px solid #000;overflow:hidden;background-image : url(../images/back.png);  background-repeat : repeat;"></div>

<div style="position:absolute;z-index:100;left:200px;width:<?=$scroller_width?>px;height:<?=$h?>px;overflow:hidden;">

// сами элементы для скроллинга
<div style="width:<?=$w*$qq;?>;" id="scroller">
<img  src="1.jpg" >
<img  src="2.jpg" >
<img  src="3.jpg" >
<img  src="4.jpg" >
<img  src="5.jpg" >
<img  src="6.jpg" >
<img  src="7.jpg" >
<img  src="8.jpg" >
</div>
</div>

-------------------------------------------------------------------
// java скрипты
-------------------------------------------------------------------
// определяем координаты скроллера
// получаем необходимые параметры

function find_out_coordinates(elemId,ew,sw,eq)
{var elem = document.getElementById(elemId);

    l = 0;
    while (elem)
    {
        l += elem.offsetLeft;
        elem = elem.offsetParent;
    }

    scroller_left=l;
    elem_width=ew
    scroller_width=sw
    elem_quantity=eq	

// определяем центр скроллера который есть отсчет скорости скроллинга
    scroller_center =scroller_width/2

// определяем конец элементов скроллинга
very_end=(elem_width*elem_quantity)-scroller_width;
}
//--------------------------------------------
// вычисляем направление и скорость скроллинга

function scroller_cursor_position(event){
xpos=event.clientX
xpos=xpos-scroller_left
xpos=xpos-scroller_center;
xpos=xpos*-1;

// далее определяем скорость 

acceleration=xpos/100; // заменив 100 на другое число можно
                                // регулировать скорость
}

//------------------------------------

function start_scrolling(){
ww=window.setInterval('scrolling()',10);
}

function stop_scrolling(){
window.clearInterval(ww);
}

function scrolling(){

// проверяем достигнут ли конец или начало в зависимости от направления, если нет то крутим
if(((y*-1<=very_end) && acceleration<0) || ((y<3) && acceleration>0)) {

// далее намудрил с приростом

yy=yy+acceleration
y=yy*2
document.getElementById("scroller").style.marginLeft=+y;
}
}

ну вот у меня работало и в Opera и в Mozilla и в IE7 (с прозрачной картинкой фона)

может не особо рационально зато сам и более менее понятно начинающим как я сам

другие же лишний раз удостоверятся что они не так уж и плохи в этом :)

если кому то поможет буду рад
буду рад замечаниям и исправлениям :)


Часовой пояс GMT +3, время: 02:16.