흐르는 배너 만들기2

<style type="text/css">
*{margin:0;padding:0;}
ul, li{list-style:none;}
#recomPro{margin-bottom:40px;}
#recomPro > div.inner{width:1400px;margin:0 auto;}
#recomPro .slideWrap{position:relative;overflow:hidden;height:337px;margin-bottom:28px;}
#recomPro .slideWrap p.bg{position:absolute;top:33px;width:179px;height:324px;background:url("./images/bg_tic_01.png") no-repeat 0 0;}
#recomPro .slideWrap p.bg.side01{left:0px;}
#recomPro .slideWrap p.bg.side02{right:-3px;background:url("./images/bg_tic_02.png") no-repeat 0 0;}
#recomPro .slideWrap a.bxBtn{position:absolute;z-index:10;top:117px;margin:0;width:21px;height:39px;background:url("./images/btn_prev_01.png") no-repeat 0 0;text-indent:-9999px;}
#recomPro .slideWrap a.bxBtn.bx-prev{left:179px;}
#recomPro .slideWrap a.bxBtn.bx-next{left:auto;right:179px;background:url("./images/btn_next_01.png") no-repeat 0 0;}
#recomPro .tickerSlide{position:absolute;top:0px;left:0px;overflow:hidden;-webkit-transition-timing-function: linear; /* Safari and Chrome */transition-timing-function: linear;}
#recomPro .tickerSlide li{float:left;width:200px;padding:33px 0 0 0;}
#recomPro .tickerSlide li > a{display:block;}
#recomPro .tickerSlide li > a p.thum{text-align:center;margin:29px 0 15px 0;}
#recomPro .tickerSlide li > a p.thum img{width:140px;margin:0 auto;}
#recomPro .tickerSlide li > a p.txt{height:59px;padding:0 20px;font-size:13px;margin-bottom:12px;text-align:center;color:#424242;line-height:18px;overflow:hidden;}
#recomPro .tickerSlide li > a p.txt em{display:block;margin-bottom:5px;text-align:center;font-weight:bold;}
#recomPro .tickerSlide li > a p.price{font-family:Roboto;font-size:16px;color:#e5151a;font-weight:bold;text-align:center;}
#recomPro .tickerSlide li > a p.price del{display:block;color:#999;font-weight:normal;}
#recomPro .tickerSlide li > a p.price del span{font-size:18px;}
#recomPro .tickerSlide li > a p.price span.wp{color:#e5151a;font-size:22px;}
#recomPro .tickerSlide li > a p.price span.wp span.pr{font-size:22px;color:#e5151a;}
< /style>


< div class="recomPro" id="recomPro">
<div class="inner">
  <h3 class="titMain">Recommended PRODUCT</h3>
  <div class="slideWrap">
   <a href="#none" class="bxBtn bx-prev">이전</a>
   <ul class="tickerSlide" id="tickerSlide">
    <li>
     <a href="#">
      <p class="thum"><img src="./images/thum.gif" alt="" /></p>
      <p class="txt"><em>1[DIOR]</em>DIOR ADDICT LIP GLOW CORAL</p>
      <p class="price"><del><span class="pr">$</span>88</del><span class="wp"><span class="pr">$</span>56</span></p>
     </a>
    </li>
    <li>
     <a href="#">
      <p class="thum"><img src="./images/thum.gif" alt="" /></p>
      <p class="txt"><em>2[DIOR]</em>DIOR ADDICT LIP GLOW CORAL</p>
      <p class="price"><del><span class="pr">$</span>88</del><span class="wp"><span class="pr">$</span>56</span></p>
     </a>
    </li>
    <li>
     <a href="#">
      <p class="thum"><img src="./images/thum.gif" alt="" /></p>
      <p class="txt"><em>3[DIOR]</em>DIOR ADDICT LIP GLOW CORAL</p>
      <p class="price"><del><span class="pr">$</span>88</del><span class="wp"><span class="pr">$</span>56</span></p>
     </a>
    </li>
    <li>
     <a href="#">
      <p class="thum"><img src="./images/thum.gif" alt="" /></p>
      <p class="txt"><em>4[DIOR]</em>DIOR ADDICT LIP GLOW CORAL</p>
      <p class="price"><del><span class="pr">$</span>88</del><span class="wp"><span class="pr">$</span>56</span></p>
     </a>
    </li>
    <li>
     <a href="#">
      <p class="thum"><img src="./images/thum.gif" alt="" /></p>
      <p class="txt"><em>5[DIOR]</em>DIOR ADDICT LIP GLOW CORAL</p>
      <p class="price"><del><span class="pr">$</span>88</del><span class="wp"><span class="pr">$</span>56</span></p>
     </a>
    </li>
    <li>
     <a href="#">
      <p class="thum"><img src="./images/thum.gif" alt="" /></p>
      <p class="txt"><em>6[DIOR]</em>DIOR ADDICT LIP GLOW CORAL</p>
      <p class="price"><del><span class="pr">$</span>88</del><span class="wp"><span class="pr">$</span>56</span></p>
     </a>
    </li>
    <li>
     <a href="#">
      <p class="thum"><img src="./images/thum.gif" alt="" /></p>
      <p class="txt"><em>7[DIOR]</em>DIOR ADDICT LIP GLOW CORAL</p>
      <p class="price"><del><span class="pr">$</span>88</del><span class="wp"><span class="pr">$</span>56</span></p>
     </a>
    </li>
    <li>
     <a href="#">
      <p class="thum"><img src="./images/thum.gif" alt="" /></p>
      <p class="txt"><em>8[DIOR]</em>DIOR ADDICT LIP GLOW CORAL</p>
      <p class="price"><del><span class="pr">$</span>88</del><span class="wp"><span class="pr">$</span>56</span></p>
     </a>
    </li>
   </ul>
   <a href="#none" class="bxBtn bx-next">다음</a>
   <p class="bg side01">&nbsp;</p>
   <p class="bg side02">&nbsp;</p>
  </div>
</div>
< /div>
< !-- //recomPro e -->

< script type="text/javascript">
$(document).ready(function(){
var moveType = 0;
var moveSpeed = 2500;
//var moveWork = false;
var movePause = false;

function tkSlide(){ 
  var $tkSlide = $('#tickerSlide'),
   $tkSlidePos = $('#tickerSlide').css('left').replace(/[^-\d\.]/g, ''),
   $tkWidth = $('#tickerSlide').width(),
   $tklength = $('#tickerSlide li').length,
   $tkSlideW = $tkWidth + 400,
   $tkitemW = $('#tickerSlide li').width(),
   $tkitemFirst = $('#tickerSlide li:first-child');

  $tkSlide.css({
   'left' : $tkSlidePos,
   'width' : $tkWidth + $tkitemW
  });
  if(moveType==0){
   $tkSlide.css('left' ,$tkSlidePos);
   $tkSlide.animate({left : -$tkitemW},{duration:moveSpeed, easing:"linear", step:function(){
    if(movePause==true){
     $tkSlide.stop();
    }
   }, complete:function(){
    $tkSlide.append("<li>" + $('#tickerSlide li:first-child').html() + "</li>");
    $('#tickerSlide li:first-child').remove();
    $tkSlide.css('left' ,'0');
    tkSlide();
   }});
  }
}
$('#tickerSlide').parent().on("mouseenter", function(){
  movePause=true;
});
$('#tickerSlide').parent().on("mouseleave", function(){
  movePause=false;
  console.log('mouseleave');
  tkSlide();
});

$('.slideWrap >a.bxBtn').on('click', function(){
  var banMove = 5,
   $thisClass = $(this).hasClass("bx-prev");

  if($thisClass){
   var $tkSlide = $('#tickerSlide');
   for(var i=0;i<banMove;i++){   
    var $tkSlide = $('#tickerSlide'),   
     $tkitem = $('#tickerSlide li:last-child()').html();
    $('#tickerSlide li:first-child()').before("<li>" + $tkitem + "</li>");
    $('#tickerSlide li:last-child()').remove();
   }
   $tkSlide.css('left' ,'-200px');
   $tkSlide.animate({left : 0}, 500);
  } else {
   var $tkSlide = $('#tickerSlide');
   for(var i=0;i<banMove;i++){   
    var $tkSlide = $('#tickerSlide'),   
     $tkitem = $('#tickerSlide li:nth-child(1)').html();
    $tkSlide.append("<li>" + $tkitem + "</li>");
    $('#tickerSlide li:nth-child(1)').remove();
   }
   $tkSlide.css('left' ,0);
   $tkSlide.animate({left : -200}, 500);
  }
});
tkSlide();
< /script>