이미지 슬라이드 기본형

평소 웹사이트 제작시 자주 사용하는 이미지 슬라이드 기본형이다. 

매번 플러그인으로 만들어놔야지 하고선 귀찮아서 자꾸 또 코딩하고 또 코딩하고 있는 나를 위해...그냥 이렇게 정리라도 해놓는다..;;;

jsfiddle http://jsfiddle.net/ichbintaeeun/xs0ahb9r/

HTML

<!-- rolling-wrap -->
   <div class="rolling-wrap">
        <div class="rolling">
             <div title="0" style="background:pink"></div>
             <div title="1" style="background:silver"></div>
             <div title="2" style="background:yellowgreen"></div>
        </div>
        <ul class="btn-num">
            <li class="selected"><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>             
        </ul>
   </div>
<!-- rolling-wrap -->

CSS

li {list-style:none}
div.rolling-wrap {position:relative;width:300px;height:100px;overflow: hidden;}
div.rolling-wrap div.rolling div{float: left;;width:300px;height:100px;}
div.rolling-wrap ul.btn-num {position:absolute;bottom:0px;right:10px;width:54px;height:15px;}
div.rolling-wrap ul.btn-num li{float:left;margin-right:4px;}
div.rolling-wrap ul.btn-num li:last-child{margin-right:0;}
div.rolling-wrap ul.btn-num li a{display:inline-block;width:15px;height:15px;text-indent:-9999px;background:#fff;}
div.rolling-wrap ul.btn-num li.selected a{background:#f08501;}

JQUERY

$(document).ready(function(){

    var _rollingWrap = $("div.rolling");
    var _rollingList = _rollingWrap.find("div");
    var _listWidth = _rollingList.width();
    var _btnNum = $("div.rolling-wrap").find("ul");
    var _rollingTime = 3000; // 자동롤링시간
    var _movingTime = 2000; // 애니메이트시간

    _rollingWrap.css("width",_rollingList.length*_listWidth+"px");
    
    function autoRolling(){
      clearTimeout(autoRolling);
      var _appendChild = _rollingWrap.find("div:first");       
      var _idx = _appendChild.next().attr("title");
      _btnNum.children().removeClass("selected");
      _btnNum.children().eq(_idx).addClass("selected");
      
      _rollingWrap.animate({"margin-left":"-="+_listWidth+"px"},_movingTime,function(){                                 
                            _appendChild.appendTo(_rollingWrap);
                            _rollingWrap.css({"margin-left":"0px"});                                     
                          });
    }

    function rollingStart(){
      setInterval(function() { autoRolling(); }, _rollingTime);
    }
    rollingStart();
    
});