JS, как это сделать?

<style>
div.pic1{
width:1000px; /* -- ширина div с картинкой, заменишь на свое */
height:600px; 
background:url(/img/адрес_картинки_#1.jpg);
border:1px solid;
}
div.pic2{
position:relative; 
height:600px; 
background:url(/img/адрес_картинки_#2.jpg);
border-right:1px solid;
}
div.sl{position:absolute; top:50%; right:-25px; width:50px; background:black; color:#ff93ff;}
</style>

<script>
document.getElementById('sl').onmousemove = function(event){
var wPic=1000; // ширина div с картинкой, заменишь на свое 
var _left = window.innerWidth > wPic ? (event.clientX-((window.innerWidth-wPic)/2)) : event.clientX;
if(event.which==1){
if(_left <= wPic){
document.getElementById('pic2').style.width=_left+'px';
}}
};
</script>

<center>
<div id="pic1" class="pic1">
<div id="pic2" style="width:500px" class="pic2">
<div align="center" id="sl" class="sl">&lt; | &gt;</div>
</div>
</div>
</center>