YesYo.com MintState Forums
뒤로    YesYo.com MintState BBS > Tech > Javascript
검색
멤버이름    오토
비밀번호 
 

가로 이미지 롤링

페이지 정보

작성자 MintState 댓글 2건 조회 18,182회 작성일 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 를 쓰셔야 합니다.

Total 178건 3 페이지
Javascript 목록
번호 제목 글쓴이 조회 날짜
열람중 MintState 18183 11-17
137
세로롤링 댓글+ 1
MintState 15862 11-17
136 MintState 14935 11-17
135 MintState 14483 11-17
134 MintState 16119 11-17
133 MintState 16890 11-17
132 MintState 16781 11-17
131 MintState 17715 11-17
130 MintState 16723 11-17
129 MintState 14599 11-17
128 MintState 15302 11-17
127 MintState 16105 11-17
126 MintState 16300 11-17
125 MintState 19750 11-17
124 MintState 17069 11-17
123 MintState 10614 11-17
122 MintState 15923 11-17
121 MintState 16808 11-17
120 MintState 9743 11-17
119 MintState 10380 11-17
게시물 검색
모바일 버전으로 보기
CopyRight ©2004 - 2024, YesYo.com MintState. ™