Pause news ticker on mouseover

I am working on a news ticker found on this jsfiddle but its not working as i want .the problems are :

1. 
   

   as i increase the width and height of all the divs .It doesnt work properly the last divs get overlapped on first div of second turn of news.

   
   


2. 
   

   the news divs inside main divs are not circular 1st news should be followed by the last .

   
   


3. 
   

   it doesn't pause onmouseover.

   
   

Here's the fiddle for this here

<script>
  window.verticalScroller = function ($elem) {
  var top = parseInt($elem.css('top'));
  var temp = - 1 * $('#verticalScroller > div').height();
  if (top < temp) {
    top = $('#verticalScroller').height()
    $elem.css('top', top);
  }
  $elem.animate({
    top: (parseInt(top) - 60)
  }, 600, function () {
    window.verticalScroller($(this))
  });
}
$(document).ready(function () {
  var i = 0;
  $('#verticalScroller > div').each(function () {
    $(this).css('top', i);
    i += 60;
    window.verticalScroller($(this));
  });
});

</script>

I am applying this one beacause it doesn't require any jquery .If i use a ticker with jquery and plugins the previous jquery doesn't work even after using no confliction method. kindly help me out of this .

UPDATE:

<div id="verticalScroller">
<div style="position: relative;height:200px;width:352px;">1 Lorem ipsum dolor sit</div>
<div style="position: relative;height:200px;width:352px;">2 Lorem ipsum dolor sit</div>
<div style="position: relative;height:200px;width:352px;">3 Lorem ipsum dolor sit</div>
<div style="position: relative;height:200px;width:352px;">4 Lorem ipsum dolor sit</div>
</div>

css update:

#verticalScroller {
position: absolute;
width:352px;
height: 380px;
border: 1px solid red;
overflow: hidden;
}
#verticalScroller > div {
position:absolute;
width:50px;
height:50px;
border: 1px solid blue;
overflow:hidden;
}