|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
|
<title>테스트</title> |
|
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> |
|
<script src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js"></script> |
|
|
|
<script type="text/javascript"> |
|
$(document).ready(function(){ |
|
$.when(searchImg()).done(slidePanel); |
|
}); |
|
var slidePanel = function(){ |
|
var _num=0; |
|
var _gap= ($("#panelBox").width() - $("#panelBox > .panel:first").width()) / ($("#panelBox > .panel").length-1); |
|
var _msTimer; |
|
function selectPanel(num){ |
|
_num = num; |
|
// 전체 width:1000px, 각 컨텐츠 width: 600px, 간격 200px 단위 |
|
$("#panelBox .panel").removeClass("active"); |
|
$.each($("#panelBox .panel"), function(i, obj){ |
|
//console.log(num+", "+i); |
|
if(num == i){ |
|
var left = i*_gap; |
|
$(obj).addClass("active").animate({ |
|
opacity: 1, |
|
left: left, |
|
zindex: 1 |
|
}, 100); |
|
}else if( i > num ){ |
|
var left = $(obj).prev().width()+(_gap*(i-1)); |
|
$(obj).animate({ |
|
opacity: 0.5, |
|
left: left, |
|
zindex: 0 |
|
}, 100); |
|
}else{ |
|
var left = i*_gap; |
|
$(obj).animate({ |
|
opacity: 0.5, |
|
left: left, |
|
zindex: 0 |
|
}, 100); |
|
} |
|
}); |
|
} |
|
function timer(){ |
|
if(_num < $("#panelBox .panel").length-1) _num++ |
|
else _num=0; |
|
selectPanel(_num); |
|
} |
|
|
|
$("#panelBox > .panel").hoverIntent({ |
|
over: function(){ |
|
// 이 부분이 중요하다. animation이 진행되는 중에 다른 이벤트가 들어올 경우 모든 animate를 중단시켜줘야 자연스럽게 동작한다. |
|
$("#panelBox > panel").stop(); |
|
if (_msTimer) window.clearInterval(_msTimer); |
|
selectPanel($(this).data("num")); |
|
}, |
|
out: function() { |
|
_msTimer = self.setInterval(timer,3000); |
|
} |
|
}); |
|
|
|
/* hoverIntent 라이브러리를 사용하지 않을 경우. |
|
$("#panelBox > .panel").mouseenter(function(){ |
|
|
|
// 이 부분이 중요하다. animation이 진행되는 중에 다른 이벤트가 들어올 경우 모든 animate를 중단시켜줘야 자연스럽게 동작한다. |
|
$("#panelBox > panel").stop(); |
|
if (_msTimer) window.clearInterval(_msTimer); |
|
selectPanel($(this).data("num")); |
|
}).mouseleave(function(){ |
|
_msTimer = self.setInterval(timer,3000); |
|
}); |
|
*/ |
|
|
|
// init |
|
$("#panelBox > .panel").each(function(idx){ |
|
// $(this).data("num", idx); //으로 할 경우 html 코드상에 보이지 않는다. |
|
$(this).attr("data-num", idx).css("left", (idx*_gap)+"px"); |
|
}) |
|
selectPanel(_num); |
|
_msTimer = self.setInterval(timer,3000); |
|
}; |
|
var searchImg = function(){ |
|
return $.ajax({ |
|
url : "http://apis.daum.net/search/image", |
|
dataType : "jsonp", |
|
type : "post", |
|
jsonp : "callback", |
|
data : { |
|
apikey : "9cf9177ffb039e7c2e225cea440d6b7eec4cf8db", // API KEY |
|
q : "팝 앨범", // 검색어 |
|
result : "10", // 한페이지에 출력될 결과수 |
|
pageno : $("#pageno").val(), // 페이지번호 |
|
output : "json" // JSONP 형식으로 호출하기 때문에 결과값 포맷은 json |
|
}, |
|
success : function(r){ |
|
r = r.channel; |
|
$.each(r.item, function(idx, data){ |
|
var panel = $("<div>").addClass("panel"); |
|
var img = $("<img>").attr({ |
|
src : data.thumbnail, |
|
title : data.title |
|
}).click(function(){ |
|
window.open(data.image); |
|
}).appendTo(panel); |
|
panel.appendTo("#panelBox") |
|
}); |
|
} |
|
}); |
|
}; |
|
|
|
</script> |
|
<style type="text/css"> |
|
#panelBox {position: relative; width: 1000px; height: 130px; background: fuchsia; overflow: hidden;} |
|
#panelBox .panel {position: absolute; top: 0px; left: 0; width: 130px; height: 130px; font-size: 5em; line-height: 56px; font-weight: bold; z-index:1} |
|
#panelBox .panel.first {background: yellow;} |
|
#panelBox .panel.second {background: blue;} |
|
#panelBox .panel.third {background: green;} |
|
#panelBox .panel.fourth {background: silver;} |
|
#panelBox .panel.fifth {background: black;} |
|
</style> |
|
</head> |
|
<body> |
|
<div id="panelBox"> |
|
<div class="panel first"><a href="#">first</a></div> |
|
<div class="panel second"><a href="#">second</a></div> |
|
<div class="panel third"><a href="#">third</a></div> |
|
<div class="panel fourth"><a href="#">fourth</a></div> |
|
<div class="panel fifth"><a href="#">fifth</a></div> |
|
</div> |
|
</body> |
|
</html> |
아무도없어