Показать сообщение отдельно
  #1 (permalink)  
Старый 04.01.2013, 18:52
Интересующийся
Отправить личное сообщение для Nikolai-JS Посмотреть профиль Найти все сообщения от Nikolai-JS
 
Регистрация: 24.04.2011
Сообщений: 10

Не получается автозапуск слайдера
Добрый день.
Пробовал по разному. По событию (клик) работает. А без? В каком виде вызывать функцию? Вот упрощённый код:
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title> Slider </title>	
<script>
var zSlider = (function() {
    function animateImg() {
        var start = new Date().getTime();
        if (sld.tran == 'LeftRight') {
            var posFrom = (-1) * sld.wdth * sld.curr;
            var posTo   = (-1) * sld.wdth * sld.next;
            setTimeout(function() {
                var prg = ((new Date().getTime()) - start) / sld.tmtr;
                sld.style.backgroundPosition = (posTo - posFrom) * prg + posFrom + 'px';
                if (prg < 1)   setTimeout(arguments.callee, 10);
                else            sld.style.backgroundPosition = posTo + 'px';
			}, 10);
        }	
        else if (sld.tran == 'Left') { /*......*/ }
        else if (sld.tran == 'Right') { /*......*/ }
        else    sld.style.backgroundPosition = (-1) * sld.wdth * sld.next +'px 0px';
    }
    function fnClick() {
        sld = this;
        sld.next++;
        if(sld.next == sld.imgs) { sld.next = 0; }
        animateImg();
        sld.curr = sld.next;
    }
    function fnRun() {	
        if(sld.run == false) return false;
        setTimeout(function() {
            sld.next++;
            if(sld.next == sld.imgs) { sld.next = 0; }
            animateImg();
            sld.curr = sld.next;
            if (sld.run == 'true')    setTimeout(arguments.callee, 4000);	
        }, 4000);
    }	
return {
    ini: function(sld) {
    sld.src = 'o.jpg'; //source of images
    sld.imgs = 7;      //number of images
    sld.wdth = 300;    //width of slider
    sld.hght = 170;    //height of slider
    sld.tmtr = 333;    //time of transition
    sld.tran = 'LeftRight';  //transition
    sld.curr = 0;      //number of current image
    sld.next = 0;      //number of next image
    sld.run = false;   //autorun
		
    t = sld.title;
    arr = t.split(';');
    for(var i = 0; i < arr.length; i++) {
        a = arr[i].split(':');	
        key = a[0].replace(/^\s+/,'').replace(/\s+$/,'');
        val = a[1].replace(/^\s+/,'').replace(/\s+$/,'');
        sld[key] = val;
        if(key == 'src' && a.length == 3)  { val = a[1]+':'+a[2];    sld[key] = val; }
    }
    sld.img = 'url(' + sld.src + ')';
    sld.title = '';

    sld.style.width = sld.wdth + 'px';
    sld.style.height = sld.hght + 'px';
    sld.style.cursor = 'pointer';
    sld.style.backgroundImage = sld.img;
    sld.onclick = fnClick; //работает!
			
    //fnRun(); //не работает :(
}
}
}())	
</script>
</head>
<body>
<div id="s1" title="src:http://topimages.ru/storage/simple/2dd/f4/f47a15ad39a9bffb.jpg; imgs:7; run:true"></div><br/>
<div id="s2" title="src:http://topimages.ru/storage/simple/2dd/1b/1bda62eca9047cc1.jpg; imgs:3"></div>

<script>
var s1 = document.getElementById("s1");	zSlider.ini(s1);
var s2 = document.getElementById("s2");	zSlider.ini(s2);
</script>
</body>
</html>
Ответить с цитированием