JavaScript 수평 슬라이더

Question

나는 내 자신의 연습/즐거움을 위해하고있는 프로젝트를 위해 JQuery없이 수평 슬라이더를 작성하려고 시도하고있다. 내가 문제가 있습니다 말을

function moveit() { 
    "use strict"; 
    document.getElementById("position").style.left = window.event.clientX + "px"; 
} 

window.onload = function() { 
    "use strict"; 
    findtime(); 
    document.getElementById("scrollbar").style.width = document.getElementById("thevideo").offsetWidth + "px"; 
    var mousemove; 
    document.getElementById("scrollbar").onclick = function() { 
      mousemove = window.setInterval("moveit()", 1000); 
    }; 
    document.getElementById("scrollbar").mouseup = function() { 
      window.clearInterval(mousemove); 
    }; 
}; 

없이 :

여기에 관련 코드입니다. 그것은 지속적 등 크롬, 파이어 폭스,에 오류가 발생 지금은 그것을하지만, 작동 (그러나 마우스 위치에 따라 유용하지 않습니다) 다음 코드를 실행하면 :

Uncaught TypeError: Cannot read property 'clientX' of undefined 

을 :

document.getElementById("position").style.left = 12 + "px"; 

HTML은 다음과 같습니다.

Answer 1

여기는 잠시 뒤에 작성한 것입니다. 프로그램에 맞게 조정할 수 있습니다.

var scrollTimer; 

function Timer(callback, delay) { 
    var timerId, start, remaining = delay; 
    this.pause = function() { 
     window.clearTimeout(timerId); 
     remaining -= new Date() - start; 
    }; 
    this.resume = function() { 
     start = new Date(); 
     timerId = window.setTimeout(callback, remaining); 
    }; 
    this.resume(); 
} 

function scroll(down) { 
    var scrollframe = document.getElementById("contentframe"); 
    var curY = document.all? 
    scrollframe.contentWindow.document.body.scrollTop 
    : scrollframe.contentWindow.window.pageYOffset; 
    var delta = 5; 
    var newY = down? curY+delta : curY-delta; 
    scrollframe.contentWindow.scrollTo(0,newY); 
} 

function autoscroll(down) { 
    scroll(down); 
    scrollTimer = new Timer(function() { 
    autoscroll(down); 
    }, 20); 
} 

function stopscroll() { 
    scrollTimer.pause(); 
} 

함수 스크롤 (아래 부울)는 Iframe contentframe 단일 delta 증분 상하 스크롤시킨다. 타이머는 해당 작업을 반복하는 데 사용되며 여기에 사용 방법이 나와 있습니다.

<a href=#> 
<img src="scroller/arrowTop.png" title="Scroll Up" 
    onMouseOver="autoscroll(false);" onMouseOut="stopscroll();"/> 
</a> 

희망이 있습니다.

Answer 2

거의 다 왔으므로 표준 JS에는 window.event 개체가 없습니다. 따라서 DOM Event Interface :

function moveit(e) { 
    "use strict"; 
    document.getElementById("position").style.left = e.clientX + "px"; 
} 

window.onload = function (e) { 
    "use strict"; 
    findtime(); 
    document.getElementById("scrollbar").style.width = document.getElementById("thevideo").offsetWidth + "px"; 
    var mousemove; 
    document.getElementById("scrollbar").onclick = function() { 
      mousemove = window.setInterval(moveit, 1000); 
    }; 
    document.getElementById("scrollbar").mouseup = function() { 
      window.clearInterval(mousemove); 
    }; 
};