Hover & Slide

jQuery- rolling

by I Sang Hyeon

HTML

<h2>Hover & Slide</h2>
<div class="div-wrap">
  <ul class="ul-object">
    <li style="background:#AAAAAA"><div><a href="#">1</a></div></li>
    <li style="background:#00AAAA"><div><a href="#">2</a></div></li>
    <li style="background:#AA00AA"><div><a href="#">3</a></div></li>
    <li style="background:#AAAA00"><div><a href="#">4</a></div></li>
    <li style="background:#00FF00"><div><a href="#">5</a></div></li>
  </ul>
  <div class="div-guideButton">
    <div class="div-left">
      <span class="btnGuide btnLeft">[LEFT]</span>
    </div>
    <div class="div-right">
      <span class="btnGuide btnRight">[RIGHT]</span>
    </div>
  </div>
</div>

CSS

.div-wrap {
  position:relative; width:300px;
  height:300px; 
  margin:0 auto; 
  padding: 0;
  overflow:hidden;
}
.div-wrap ul.ul-object {
  position:absolute;
  list-style-type: none;
  padding: 0;
}
.div-wrap ul.ul-object li {
  float:left;
  width:300px;
}
.div-wrap div.div-guideButton{
  position: absolute;
  width: 300px;
  height: 100px;
  top: 200px;
  overflow: hidden;
  clear: both;
}
.div-wrap div.div-guideButton div.div-left{
  float:left;
}
.div-wrap div.div-guideButton div.div-right{
  float:right;
}
.div-wrap div.div-guideButton div span{
  cursor:pointer;
}

JavaScript

/** Hover & Slide **/
var $list = $('.ul-object');
var contentWidth = $list.children().outerWidth();
var contentLength =  $list.children().length;
var slideDuration = 1000;
var animateDuration = 500;
var timer = null;
var countToMove = 1;

$(document).ready(function(){
  $list.css('width',contentWidth*contentLength);
  $list.children().css('height','300px');
  $('.div-guideButton').css('opacity','0');
  activateToRoll(true);
	
  $list.parent().hover(
    function(){
    	activateToRoll(false);
      $('.div-guideButton').css('opacity','1.0');
    },
    function(){
    	activateToRoll(true);
      $('.div-guideButton').css('opacity','0');
    }
  );

	$('.btnGuide').click(function(){
    if($(this).hasClass('btnLeft'))	countToMove = countToMove-2;
    slideContents();
  });
});

function activateToRoll(toRoll){
  if(toRoll){
    timer = setInterval(slideContents, slideDuration);
  }else{
  	clearInterval(timer);
  }
}

function slideContents(){
  if(countToMove >= contentLength)	countToMove = 0;
  if(countToMove < 0)	countToMove = contentLength-parseInt(1);
  $list.animate({'left': -(countToMove*contentWidth)+'px' },animateDuration);
  countToMove++;
}