tweenmax

2013. 11. 1. 16:52KnowLedge/JAVASCRIPT

 

<!--HEAD CODE-->

<script type="text/javascript" src="tweenmax.min.js"></script>

<!--CSS CODE-->

* {margin:0;padding:0}
li {list-style:none}
.mainImg {width: 100%;display: inline-block;height: 426px;padding: 130px 0 0;overflow: hidden}
.main_image {position:relative;width: 450px;height:300px; overflow:hidden }
.container {position:relative;width:450px;}
.main_image ul {position:absolute;width:99999px;left:0}
.main_image ul li {float:left;width:450px}
.main_image ul li div {position:relative;width:450px}
.main_image ul li div span {position:absolute;display:block;width:450px;height:300px;top:0;left:0;overflow:hidden;}
.controller {width:100%}
.controller .all {width:450px;}
.control_right {float:left; margin-top: 8px;}
.autoSlideButton {display:block;width:20px;height:20px;margin-right:2px;border:0 none;background:none;background:url("http://www.samsungchemical.com/images/chn/common/bg_gnb_set.png") -33px 0 no-repeat;float:left;cursor:pointer}
.pasingDot {width:420px;margin-top:2px;float:left}
.pasingDot li {float:left;cursor:pointer;width:16px;height:16px;background:url("http://www.samsungchemical.com/images/chn/common/bg_gnb_set.png") 0 0 no-repeat}
.pasingDot li button {width:16px;height:16px;border:0 none;background:none;cursor:pointer}
.tweenmax_bg{background-color:#000; padding:5px 5px 5px 5px;}
.tweenmax{float:right; width:460px; padding-top:65px;}

 

<!--PHP CODE-->

<!--tweenmax control-->
<script type="text/javascript">
$(document).ready(function(){
 var $paging         = $(".pasingDot li button"),
  _current        = 0,
  _total          = $paging.length;
 var timerState  =   true;
  init();
 function init(){
  timer   = setInterval( autoScroll, 4000);
  }
 function autoScroll()
  {
  if( _current < 5 )
  {
  _current++;
  }
  else
  {
  _current = 0
  }
 TweenMax.to($('.main_image ul'), 1, {css:{'left':  (_current * -450) +'px'}, ease:Expo.easeOut});
  $(".pasingDot li").css({backgroundPosition:"0 0" }).eq(_current).css({backgroundPosition:"-16px 0px" });
  }
  $paging.click(function(){
  _current = $paging.index(this);
  TweenMax.to($('.main_image ul'), 1, {css:{'left':  (_current * -450) +'px'}, ease:Expo.easeOut});
        $(".pasingDot li").css({backgroundPosition:"0 0" });
 
        $(this.parentNode).css({backgroundPosition:"-16px 0px" });
    });
    $paging.mouseover(function(){
        if(timerState){
            clearInterval(timer);
        }
    });
    $paging.mouseleave(function(){
        if(timerState){
            timer   = setInterval( autoScroll, 2000);
         }
    });
    $('.autoSlideButton').click(function(){
        timerState  =   !timerState;
        if(timerState){
            timer   = setInterval( autoScroll, 2000);
            $('.autoSlideButton').css({backgroundPosition:"-33px 0px"});
        }else{
            clearInterval(timer);
            $('.autoSlideButton').css({backgroundPosition:"-53px 0px"});
        }
    });
    $paging.each(function(i){
        if( i == _current )
        {
            $(this.parentNode).css({ cursor:"default", backgroundPosition:"-16px 0px" });
        }
        else
        {
            $(this.parentNode).css({ cursor:"pointer", backgroundPosition:"0px 0px" });
        }
    });
});
</script>
<!--tweenmax control-->

 

<div class="tweenmax"><!--tweenmax-->
      <div class="tweenmax_bg"><!--tweenmax_bg-->
       <div class="main_image">
        <div class="container">
         <ul>
          <li class="imageSet_1" style="list-style:none">
           <div style="width:100%;height:300px"><img src="이미지경로.jpg"  alt="이미지1"></div>
          </li>
          <li class="imageSet_2" style="list-style:none">
           <div style="width:100%;height:300px"><img src="이미지경로.jpg"  alt="이미지2"></div>
          </li>
          <li class="imageSet_3" style="list-style:none">
           <div style="width:100%;height:300px"><img src="이미지경로.jpg"  alt="이미지3"></div>
          </li>
          <li class="imageSet_4" style="list-style:none">
           <div style="width:100%;height:300px"><img src="이미지경로.jpg"  alt="이미지4"></div>
          </li>
          <li class="imageSet_5" style="list-style:none">
           <div style="width:100%;height:300px"><img src="이미지경로.jpg"  alt="이미지5"></div>
          </li>
          <li class="imageSet_6" style="list-style:none">
           <div style="width:100%;height:300px"><img src="이미지경로.jpg"  alt="이미지6"></div>
          </li>
         </ul>
        </div>
       </div>
       <div class="controller">
        <div class="all">
         <div class="control_right">
          <button class="autoSlideButton"></button>
          <ul class="pasingDot">
           <li style="list-style:none"><button></button></li>
           <li style="list-style:none"><button></button></li>
           <li style="list-style:none"><button></button></li>
           <li style="list-style:none"><button></button></li>
           <li style="list-style:none"><button></button></li>
           <li style="list-style:none"><button></button></li>
          </ul>
         </div>
        </div>
       </div>
      </div><!--tweenmax_bg-->
     </div><!--tweenmax-->

 

tweenmax.min.js

 

소스 제공 : http://baninana.tistory.com/entry/s#comment11428622 
저는 som Quixote님꺼 보고 활용했습니다. 깔끔하게 잘 하신거같아서 저는 단지 숟가락만 올렸을뿐...
하지만 익스플러 7이하는 지원이 안되는것같더군요. 그래서 저는 다른 js를 써서 7이하 구동시켰습니다 ^^v