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 

など、クロム、Firefoxの上のエラーを生成します。

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); 
    }; 
};