최근 슬라이드 배너를 만들어 보았습니다.
Jquery를 몰랐던 탓에 약간의 시간이 걸렸지만
라이브러리를 제공하는 진리의 사이트를 찾아냈네요.
<![CDATA[
<!doctype html>
<head>
<style>
/* Prevents slides from flashing */
#slides {
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slides.min.js"></script>
<script>
$(function(){
$("#slides").slidesjs({
width: 940,
height: 528
});
});
</script>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-717c7b1234a0a46519d1483dc3db06322985d92c/static/style/revenue.css"/>
<link rel="canonical" href="https://woosang84.tistory.com/793"/>
<!-- BEGIN STRUCTURED_DATA -->
<script type="application/ld+json">
{"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://woosang84.tistory.com/793","name":null},"url":"https://woosang84.tistory.com/793","headline":"롤링, 슬라이드 배너 손쉽게 구현하기","description":"최근 슬라이드 배너를 만들어 보았습니다.Jquery를 몰랐던 탓에 약간의 시간이 걸렸지만 라이브러리를 제공하는 진리의 사이트를 찾아냈네요. SLIDESJS.com에서 해당 소스 정보를 얻을 수 있답니다.기본 마크업, 옵션 등에 대한 설명도 자세히 적혀 있으니 참고하세요. 조금 어렵다 싶으면 아래 사이트도 참고하세요.http://www.webpeace.net/content.jsp?num=124&userid=sunnykist&type=user","author":{"@type":"Person","name":"심우상","logo":null},"image":{"@type":"ImageObject","url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F264315405162724B26","width":"800px","height":"800px"},"datePublished":"2013-04-08T16:35:42+09:00","dateModified":"2013-04-08T16:35:42+09:00","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}}
</script>
<!-- END STRUCTURED_DATA -->
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-717c7b1234a0a46519d1483dc3db06322985d92c/static/style/dialog.css"/>
<link rel="stylesheet" type="text/css" href="//t1.daumcdn.net/tistory_admin/www/style/top/font.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-717c7b1234a0a46519d1483dc3db06322985d92c/static/style/postBtn.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-717c7b1234a0a46519d1483dc3db06322985d92c/static/style/comment.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-717c7b1234a0a46519d1483dc3db06322985d92c/static/style/tistory.css"/>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-717c7b1234a0a46519d1483dc3db06322985d92c/static/script/common.js"></script>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-717c7b1234a0a46519d1483dc3db06322985d92c/static/script/comment.js" defer=""></script>
</head>
<div id="slides">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
</div>
]]>
SLIDESJS.com에서 해당 소스 정보를 얻을 수 있답니다.
기본 마크업, 옵션 등에 대한 설명도 자세히 적혀 있으니 참고하세요.
조금 어렵다 싶으면 아래 사이트도 참고하세요.
http://www.webpeace.net/content.jsp?num=124&userid=sunnykist&type=user
