#pdemo{ width:1000px; overflow:hidden;}
#pdemo_roll{ width:800%;}
#pdemo1{ float:left;}
#pdemo2{ float:left;}

<div id=”pdemo_left”></div>
<div id=”pdemo”>
<div id=”pdemo_roll”>
<div id=”pdemo1″ class=”cont_roll”></div>
<div id=”pdemo2″ class=”cont_roll”></div>
</div>
</div><div id=”pdemo_right”></div>

var pspeed=30;
	var pi=0;
    var pdemo = $("#pdemo");
    var pdemo1 = $("#pdemo1");
    var pdemo2 = $("#pdemo2");
	   var pdemo_left = $("#pdemo_left");
	      var pdemo_right = $("#pdemo_right");
    pdemo2.html(pdemo1.html());
	
    function pMarquee(){ 
        if(pdemo.scrollLeft()>=pdemo1.width()){
            pdemo.scrollLeft(0); 
		}
        else{
            pdemo.scrollLeft(pdemo.scrollLeft()+1);
        }
    } 
	
   function pMarquee_left(){
	   
	   if(pdemo.scrollLeft()>=pdemo1.width())
			pdemo.scrollLeft(0); 
	   else{
		  pdemo.scrollLeft(pdemo.scrollLeft()+1);
	   }
   }


   function pMarquee_rihgt(){
              if(document.getElementById("pdemo").scrollLeft<=0){
                  document.getElementById("pdemo").scrollLeft=document.getElementById("pdemo2").offsetWidth;
              }
              else{
                  document.getElementById("pdemo").scrollLeft--;
              }
			  
   }


    var pMyMar=setInterval(pMarquee,pspeed) 
    pdemo.mouseover(function() {
        clearInterval(pMyMar);
    } )
    pdemo.mouseout(function() {
						   
	if(pi==0){
	   	   pMyMar=setInterval(pMarquee,pspeed)
	   }else{
		   pMyMar=setInterval(pMarquee_rihgt,pspeed)
	   }
  
		
    } )
	
	
	pdemo_left.mouseover(function() {		
		clearInterval(pMyMar);
		pMyMar=setInterval(pMarquee,pspeed);
		pi=0;
	})
	
	pdemo_right.mouseover(function() {
	   clearInterval(pMyMar);
		pMyMar=setInterval(pMarquee_rihgt,pspeed);
		pi=1;
	})