• 돌아가기
  • 아래로
  • 위로
  • 목록
  • 댓글

이미지 슬라이드

오작교 9460

0
아래의 소스는 주로 쇼핑몰 사이트에서 메인화면에 등록된 상품 이미지를 슬라이드 형식으로 출력하는 형식으로 많이 사용되는 부분일겁니다.
메타 태그를 사용할때 10개를 출력을 시키면 다시 처음으로 되돌아 갈때 공백부분이 보이지만 아래 소스는 그런 경우가 없이 자연스럽게 슬라이드 됩니다.
자바스크립 소스를 사용해서 이렇게 디비의 내용을 추출해서 사용할 수 있구나 하시고 참고해 보시면 좋을듯 싶내요..

실행방법은 아래 소스를 보시고 사용자 정보를 기재후에 원하는 파일명으로 만든 다음에 업로드를 합니다.
출력하고자 하는 부분에 인쿠르드를 하시면 되겠습니다..
<? //디비정보
$_zb_url = "제로보드가 설치된 url";
$_zb_path = "제로보드가 설치된 절대경로";
include $_zb_path."outlogin.php";
$lanks = 10; // 뽑을 갯수
$bidg = 적용할 게시판 이름; // 추출할 게시판 이름
$result5= mysql_query("select * from zetyx_board_$bidg order by no desc limit $lanks") or die(mysql_error());
?>
<script type="text/javascript">
var sliderwidth="342px" // 가로넓이
var sliderheight="100px" // 세로 높이
var slidespeed=1 // 슬라이드 스피드 수치가 높으면 속도업
slidebgcolor="#f8f8f8" // 이미지뒤에 배경색

var leftrightslide=new Array()
var finalslide=''
<?
$j=0;
while($data2=mysql_fetch_array($result5)) {
$no =  stripslashes($data2[no]);
$file = stripslashes($data2[file_name1]);
$data[subject] = cut_str($data2[subject], 10); //제목글자 10자로 자르기
$subject = strip_tags(stripslashes($data2[subject]));
if(eregi("\.gif|\.jpg",$data2[file_name1])) $filename = $_zb_url.$data2[file_name1];
elseif(eregi("\.gif|\.jpg",$data2[file_name2])) $filename = $_zb_url.$data2[file_name2];
else $filename="<img src='https://홈주소/노이미지용파일 이름 width='100' height='90' border=0 />";
if($filename) {
?>
leftrightslide[<?=$j?>]='<a href="<?=$_zb_url?>zboard.php?id=<?=$bidg?>&no=<?=$no?>"><img src="<?=$filename?>"  width="100" height="90" border=0 align=absmiddle /></a> '
<?
}
$j++;
}
?>
var imagegap=" "
var slideshowgap=5

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
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+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"
if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+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
}
}

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="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="test2" style="position:absolute;left:0px;top:5px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:5px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<span width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<span name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></span>')
write('<span name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></span>')
write('</span >')
}
document.write('</td></table>')
}
}
</script>
                                                                                                                            글출처 : Tip Korea
공유
0

댓글 쓰기 권한이 없습니다. 로그인

취소 댓글 등록

신고

"님의 댓글"

이 댓글을 신고하시겠습니까?

댓글 삭제

"님의 댓글"

삭제하시겠습니까?

목록

공유

facebooktwitterpinterestbandkakao story
검색어 : 201910
번호 제목 글쓴이 날짜 조회 추천
151
normal
오작교 16.06.27.17:22 17080 0
150
normal
오작교 08.11.25.13:52 25857 0
149
normal
오작교 08.07.24.09:23 53404 0
148
normal
오작교 08.01.11.09:36 22663 0
147
normal
오작교 07.11.13.16:23 23286 0
146
normal
오작교 09.09.24.17:45 25335 0
145
normal
오작교 09.09.14.14:26 17450 0
144
normal
오작교 09.08.30.23:29 20917 0
143
normal
오작교 09.04.29.13:31 29583 0
142
normal
오작교 09.03.10.11:48 21227 0
141
normal
오작교 09.03.10.10:35 21420 0
140
normal
오작교 09.03.10.10:13 18882 0
139
normal
오작교 09.03.10.09:50 19948 0
138
normal
오작교 09.02.27.13:31 21011 0
137
normal
오작교 09.02.27.11:34 19433 0
136
normal
오작교 09.02.27.11:05 19731 0
135
normal
오작교 09.02.26.19:28 21444 0
134
normal
오작교 09.02.06.16:42 24134 0
133
normal
오작교 08.12.19.16:23 18935 0
132
normal
오작교 08.12.16.11:03 21327 0