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

가로 이미지 롤링

페이지 정보

작성자 MintState 댓글 2건 조회 11,839회 작성일 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건 1 페이지
Javascript 목록
번호 제목 글쓴이 조회 날짜
178 MintState 20419 11-17
177 MintState 18185 11-17
176 MintState 17118 04-24
175 MintState 16336 01-19
174 MintState 16084 11-17
173 MintState 16071 02-17
172 MintState 13814 11-17
171 MintState 13115 02-13
170 MintState 12731 04-29
169 MintState 12713 01-13
168 MintState 12573 02-13
167 MintState 12394 10-27
166 MintState 12224 09-01
열람중 MintState 11840 11-17
164 MintState 11673 01-05
163 MintState 11599 11-17
162 MintState 11555 11-17
161 MintState 11460 11-17
160 MintState 11190 10-23
159 MintState 11187 04-29
게시물 검색
모바일 버전으로 보기
CopyRight ©2004 - 2019, YesYo.com MintState. ™