자바스크립트로 구성된 이미지 슬라이더입니다. 아래 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

2007/12/28 08:46 2007/12/28 08:46

트랙백 주소 :: 이 글에는 트랙백을 보낼 수 없습니다

댓글을 달아 주세요

  1. 제발여 2013/01/30 18:18  댓글주소  수정/삭제  댓글쓰기

    이거 개수를 19개로 늘리고싶은데 늘리고나서 무엇을 더 추가해줘야하나요~~?

  2. david 2011/11/03 11:01  댓글주소  수정/삭제  댓글쓰기

    이미지 스크롤 스크립트 관련 질문입니다...이미지 스크롤 스크립트에서 이미지 사이즈를 키우게 되면 이미지가 6개 정도만 나오고 롤링이 멈추어버리는데 무슨 문제인지 모르겠네요...아시는 분 알려주시기 바랍니다..감사합니다..

  3. mikali 2009/12/18 18:24  댓글주소  수정/삭제  댓글쓰기

    역시 자바.. 못따라가요..ㅠㅠ 감사합니다.

  4. 비밀방문자 2009/10/09 15:56  댓글주소  수정/삭제  댓글쓰기

    관리자만 볼 수 있는 댓글입니다.

  5. 와웅 2009/06/26 21:30  댓글주소  수정/삭제  댓글쓰기

    감사합니다

  6. brave 2009/06/23 17:47  댓글주소  수정/삭제  댓글쓰기

    감사합니다...

  7. 뮤직바 2009/03/18 14:17  댓글주소  수정/삭제  댓글쓰기

    급하게 스크립트소스가 필요했는데... 손볼 필요도 없이 딱 원하는 내용이네요.
    감사히 담아갑니다.

  8. skj 2009/02/27 17:30  댓글주소  수정/삭제  댓글쓰기

    우와 짱~~~

    자바스크립트는 넘 어려워요!~~~ㅜ ㅜ

  9. yik 2008/12/10 08:35  댓글주소  수정/삭제  댓글쓰기

    감사히 담아갑니다. 프로그램에는 꽝인 디자이너입니다. 좋은 소스로 열심히 공부를!! ㅋ 좋은 하루 보내시길 바랍니다.^^