2013. 11. 1. 16:52ㆍKnowLedge/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-->
소스 제공 : http://baninana.tistory.com/entry/s#comment11428622
저는 som Quixote님꺼 보고 활용했습니다. 깔끔하게 잘 하신거같아서 저는 단지 숟가락만 올렸을뿐...
하지만 익스플러 7이하는 지원이 안되는것같더군요. 그래서 저는 다른 js를 써서 7이하 구동시켰습니다 ^^v
'KnowLedge > JAVASCRIPT' 카테고리의 다른 글
상단메뉴만들기^^ (0) | 2014.04.14 |
---|---|
메뉴 페이지 인식 두번째 방법. (0) | 2013.11.01 |
모달팝업. (0) | 2013.10.28 |
오전 오후 다른 백그라운드 쓰기~ (0) | 2013.02.12 |
상단 메뉴 고정 및 클릭시 부드럽게 이동 (0) | 2013.02.12 |