자바스크립트로 구성된 이미지 슬라이더입니다. 아래 HTML 소스를 sample.html 로 저장하고 실행하면 아래 화면 처럼 출력이 됩니다. 자바스크립트 입문자에게는 공부가 될만한 소스이며 자신의 필요에 맞게 커스터마이징해서 실무에 활용해볼 수 있습니다. 앞으로 자바스크립트(javascript)를 학습하는 입문자 분들에게 공부가 될만한 미니 소스들을 이따금씩 준비해볼까 합니다.
<HTML>
<HEAD>
<TITLE>이미지 스크롤</TITLE>
<style type="text/css">
a:link{color:#fff; text-decoration:none;}
a:visited{color:#fff; text-decoration:none;}
a:hover{color:#fff; text-decoration:underline;}
a:link{color:#fff; text-decoration:none;}
img{border:0px;}
.select_direction{cursor:hand}
ul, li {list-style:none; padding:0; margin:0;}
.slider_td{padding-top:16px;}
.slider_ul li {width:59px; height:64px; padding-right:9px; float:left; white-space: nowrap; overflow:hidden; }
.slider_ul li img {vertical-align:top; border:1px solid #eeeeee; width:57; height:40;white-space: nowrap;}
.slider_ul li h1 {font-family:"돋움",tahoma,verdana; padding:0; margin:0; width:59px; height:20px; line-height:20px; overflow:hidden; text-align:center; font-size:11px; font-weight:normal; padding-top:2px;white-space: nowrap;}
</style>
<script>
var my_config = [];
with (my_config) {
my_config.speed = "30";
my_config.scroll = 1;
my_config.width = "500";
my_config.height = "70";
my_config.direction = "left";
my_config.banners;
my_config.slider;
my_config.slider_1;
my_config.slider_2;
my_config.timer;
}
function autoScroll(type){
my_config.direction = type;
this.items = [];
this.add_banner = function(image,link,title,target){
var newItem = {};
newItem.image = image;
newItem.link = link;
newItem.title = title;
newItem.target = target;
this.items[this.items.length] = newItem;
}
this.play = function(){
my_config.banners = this.items;
scroll_html();
with (my_config) {
slider=document.getElementById("slider_box");
slider_1=document.getElementById("slider_box_1");
slider_2=document.getElementById("slider_box_2");
slider_2.innerHTML=slider_1.innerHTML;
timer=setInterval(do_timer,speed);
}
}
}
function scroll_html(){
var str = "", tmp = "", b = "", c ="", d = "";
for(var i=0;i<my_config.banners.length;i++){
var a = my_config.banners[i]
str += "<li><a href='"+a.link+"' target='"+a.target+"'><img src='"+a.image+"' width=57 height=40 title='"+a.title+"'></a><h1><a href='"+a.link+"' >"+a.title+"</a></h1></li>";
}
if (my_config.direction == "left" || my_config.direction == "right"){
b = "<div id=slider_scroller style='float: left; width: 800%'>";
c = " style='float: left'";
d = "</div>";
}
tmp += "<div id=slider_box onmouseover='do_stop()' onmouseout='do_move()' style='overflow:hidden; width:"+my_config.width+"px; height:"+my_config.height+"px'>";
tmp += b + "<div id=slider_box_1"+c+">" + str;
tmp += "</div><div id=slider_box_2"+c+">"+d+"</div></div>";
document.getElementById("slider_show").innerHTML = tmp;
}
function do_left() {my_config.direction='left'}
function do_right() {my_config.direction='right'}
function do_stop() {my_config.scroll=0}
function do_move() {my_config.scroll=1}
function do_timer(){
with(my_config){
if (scroll) {
if (direction == "top"){
if (slider_2.offsetTop-slider.scrollTop<=0){ slider.scrollTop-=slider_1.offsetHeight }
else {slider.scrollTop++}
} else if(direction == "down"){
if (slider_1.offsetTop-slider.scrollTop>=0) slider.scrollTop+=slider_2.offsetHeight
else {slider.scrollTop--}
} else if (direction == "left"){
if (slider_2.offsetWidth-slider.scrollLeft<=0) slider.scrollLeft-=slider_1.offsetWidth
else {slider.scrollLeft++;}
} else if (direction == "right"){
if (slider.scrollLeft<=0) slider.scrollLeft+=slider_2.offsetWidth
else {slider.scrollLeft--}
}
}
}
}
function play_game (type){
if (my_config.timer) clearInterval(my_config.timer);
var direction = type;
var obj = new autoScroll(type);
obj.add_banner("http://hompy.info/attach/1/1057862274.jpg","http://hompy.info/179#1","사진 #1","_blank");
obj.add_banner("http://hompy.info/attach/1/1091749905.bmp","http://hompy.info/179#2","사진 #2","_blank");
obj.add_banner("http://hompy.info/attach/1/1088322503.jpg","http://hompy.info/179#3","사진 #3","_blank");
obj.add_banner("http://hompy.info/attach/1/1214111187.gif","http://hompy.info/179#4","사진 #4","_blank");
obj.add_banner("http://hompy.info/attach/1/1195784232.png","http://hompy.info/179#5","사진 #5","_blank");
obj.add_banner("http://hompy.info/attach/1/1342744226.jpg","http://hompy.info/179#6","사진 #6","_blank");
obj.add_banner("http://hompy.info/attach/1/1290697956.jpg","http://hompy.info/179#7","사진 #7","_blank");
obj.add_banner("http://hompy.info/attach/1/1323206309.jpg","http://hompy.info/179#8","사진 #8","_blank");
obj.add_banner("http://hompy.info/attach/1/1221839979.jpg","http://hompy.info/179#9","사진 #9","_blank");
obj.add_banner("http://hompy.info/attach/1/1348078903.png","http://hompy.info/179#10","사진 #10","_blank");
obj.add_banner("http://hompy.info/attach/1/1389674041.png","http://hompy.info/179#11","사진 #11","_blank");
obj.add_banner("http://hompy.info/attach/1/1204919872.jpg","http://hompy.info/179#12","사진 #12","_blank");
obj.add_banner("http://hompy.info/attach/1/1015707056.jpg","http://hompy.info/179#13","사진 #13","_blank");
obj.add_banner("http://hompy.info/attach/1/1139032860.jpg","http://hompy.info/179#14","사진 #14","_blank");
obj.play();
}
</script>
</HEAD>
<BODY LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20" class="select_direction" onclick="do_left();return false;" align=right>◁</td>
<td class="slider_td" style="background-color:#111111">
<ul class="slider_ul" id="slider_show"></ul>
</td>
<td width="20" class="select_direction" onclick="do_right();return false;">▷</td>
</tr>
</table>
<script>
play_game("left");
</script>
</BODY>
</HTML>
웹프로그래머의 홈페이지정보 블로그 http://hompy.info
(0) 
(0)
Copyright ⓒ
댓글을 달아 주세요
감사히 담아갑니다. 프로그램에는 꽝인 디자이너입니다. 좋은 소스로 열심히 공부를!! ㅋ 좋은 하루 보내시길 바랍니다.^^