가로 이미지 롤링
페이지 정보
작성자 MintState 댓글 2건 조회 18,551회 작성일 08-11-17 14:07본문
가로 이미지 롤링
<script language="JavaScript1.2"> <!-- // 스크롤러의 가로크기 var sliderwidth=455 // 스크롤러의 높이 (이미지의 높이와 맞추어 주세요) var sliderheight=98 // 스크롤 속도 (클수록 빠릅니다 1-10) var slidespeed=2 var slideshowgap=2 // 배경색상 slidebgcolor="#ffffff" // 이미지들을 설정 하세요 var leftrightslide=new Array() var finalslide='' leftrightslide[0]='<a href="#"><img src="img1.gif" border=0></a>' leftrightslide[1]='<a href="#"><img src="img2.gif" border=0></a>' leftrightslide[2]='<a href="#"><img src="img3.gif" border=0></a>' leftrightslide[3]='<a href="#"><img src="img4.gif" border=0></a>' leftrightslide[4]='<a href="#"><img src="img5.gif" border=0></a>' leftrightslide[5]='<a href="#"><img src="img6.gif" border=0></a>' var copyspeed=slidespeed leftrightslide='<nobr>'+leftrightslide.join("")+'</nobr>' var iedom=document.all||document.getElementById if (iedom) document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-10000">'+leftrightslide+'</span>') var actualwidth='' var cross_slide, ns_slide function fillup(){ if (iedom){ cross_slide=document.getElementById? document.getElementById("mini2") : document.all.mini2 cross_slide2=document.getElementById? document.getElementById("mini3") : document.all.mini3 cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth cross_slide2.style.left=actualwidth } else if (document.layers){ ns_slide=document.ns_slidemenu.document.ns_slidemenu2 ns_slide2=document.ns_slidemenu.document.ns_slidemenu3 ns_slide.document.write(leftrightslide) ns_slide.document.close() actualwidth=ns_slide.document.width ns_slide2.left=actualwidth ns_slide2.document.write(leftrightslide) ns_slide2.document.close() } lefttime=setInterval("slideright()",30) } window.onload=fillup function slideright(){ if (iedom){ if (parseInt(cross_slide.style.left)<(actualwidth+8)) cross_slide.style.left=parseInt(cross_slide.style.left)+copyspeed+"px" else cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth*(-1)+slideshowgap+"px" if (parseInt(cross_slide2.style.left)<(actualwidth+8)) cross_slide2.style.left=parseInt(cross_slide2.style.left)+copyspeed+"px" else cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth*(-1)+slideshowgap+"px" } else if (document.layers){ if (ns_slide.left>(actualwidth*(-1)+8)) ns_slide.left-=copyspeed else ns_slide.left=ns_slide2.left+actualwidth+slideshowgap if (ns_slide2.left>(actualwidth*(-1)+8)) ns_slide2.left-=copyspeed else ns_slide2.left=ns_slide.left+actualwidth+slideshowgap } } function slideleft(){ if (iedom){ if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8)) cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed else cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8)) cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed else cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth } else if (document.layers){ if (ns_slide.left>(actualwidth*(-1)+8)) ns_slide.left-=copyspeed else ns_slide.left=ns_slide2.left+actualwidth if (ns_slide2.left>(actualwidth*(-1)+8)) ns_slide2.left-=copyspeed else ns_slide2.left=ns_slide.left+actualwidth } } if (iedom||document.layers){ with (document){ document.write('<table border="0" cellspacing="0" cellpadding="0" topmargin="0" leftmargin="0"><td>') if (iedom){ write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">') write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">') write('<div id="mini2" style="position:absolute;left:0;top:0"></div>') write('<div id="mini3" style="position:absolute;left:-1000;top:0"></div>') write('</div></div>') } else if (document.layers){ write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>') write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>') write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>') write('</ilayer>') } document.write('</td></table>') } } //--> </script>
|
댓글목록
케이꾸님의 댓글
케이꾸 작성일
좋은정보 감사합니다 ^^
그리고 혹시 양옆에 화살표이미지넣어서 흐르는 방향 조절이나 클릭하면 다음사진으로 넘어가는 기능넣을려면 복잡할까요? ㅠㅜ
MintState님의 댓글의 댓글
MintState 작성일
롤링 소스가 많은데...
http://www.woothemes.com/flexslider/ 추천해드립니다.
모바일에서 스와이프 기능 까지 구현 가능합니다. 대신 jquery 를 쓰셔야 합니다.