썸네일 이미지 무한스크롤 happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > JAVASCRIPT > javascript 소스창고 > 이미지관련 > 썸네일 이미지 무한스크롤 상세정보

클라우드태그

Javascript

PHP

ASP

CSS

HTML

MYSQL

jquery

image

Mobile

API

slide

게시판

메뉴

현재접속자 명

썸네일 이미지 무한스크롤

해피팀

네티즌

소스분류

이미지관련

다운로드 횟수

1348 회

간단설명

자바스크립트에 지정해놓은 이미지들을 무한으로 스크롤됩니다. 스크롤되는 이미지 위에 마우스커서를 올리면 이미지스크롤이 멈추고 선택할수있으며 선택하시면

평가하기

자바스크립트로 이미지가 무한스크롤이 되며 스크롤될때 마우스를 오버시키면 스크롤되던게 멈추며 선택할수있게 됩니다.

본 예제의 자바스크립트입니다.

<html>
<head>
<title>HAPPYCGI</title>
</head>
<body>

; AuctionThum[2]="http://demo.happycgi.com/jini/pick2.jpg"
; AuctionLink[2]="http://www.happycgi.com"
; AuctionDesc[2]="이미지 설명 2"

; AuctionThum[3]="http://demo.happycgi.com/jini/pick3.jpg"
; AuctionLink[3]="http://www.happycgi.com"
; AuctionDesc[3]="이미지 설명 3"

; AuctionThum[4]="http://demo.happycgi.com/jini/pick4.jpg"
; AuctionLink[4]="http://www.happycgi.com"
; AuctionDesc[4]="이미지 설명 4"

; AuctionThum[5]="http://demo.happycgi.com/jini/pick5.jpg"
; AuctionLink[5]="http://www.happycgi.com"
; AuctionDesc[5]="이미지 설명 5"

; AuctionThum[6]="http://demo.happycgi.com/jini/pick6.jpg"
; AuctionLink[6]="http://www.happycgi.com"
; AuctionDesc[6]="이미지 설명 6"

; AuctionThum[7]="http://demo.happycgi.com/jini/pick7.jpg"
; AuctionLink[7]="http://www.happycgi.com"
; AuctionDesc[7]="이미지 설명 7"

; AuctionThum[8]="http://demo.happycgi.com/jini/pick8.jpg"
; AuctionLink[8]="http://www.happycgi.com"
; AuctionDesc[8]="이미지 설명 8"

; AuctionThum[9]="http://demo.happycgi.com/jini/pick9.jpg"
; AuctionLink[9]="http://www.happycgi.com"
; AuctionDesc[9]="이미지 설명 9"

; AuctionThum[10]="http://demo.happycgi.com/jini/pick10.jpg"
; AuctionLink[10]="http://www.happycgi.com"
; AuctionDesc[10]="이미지 설명 10"

; AuctionThum[11]="http://demo.happycgi.com/jini/pick11.jpg"
; AuctionLink[11]="http://www.happycgi.com"
; AuctionDesc[11]="이미지 설명 11"

;
; var scrollspeed ="30" //스크롤 속도
; var borderd ="1px" //보더두께
; var slideborder ="#555555" //보더색상
; var slidebgcolor="#ffffff" //배경색상
; var textcolor ="#222222" //텍스트 색상
; var gallerywidth="500" //슬라이더 가로크기
;

var slider1, slider2, maxWid=0; var sliderwidth=0;
var quot="'"; var scrollamount=-1; var thCnt=0;
var CrossSellimages=new Array();
for (var i=1; i<=AuctionThum.length; i++){if (AuctionThum[i]){thCnt++;
    if (!ImgWidRatio[i]) {ImgWidRatio[i]=ImgWidRatio[0]};
    CrossSellimages[thCnt]='<a href="'+AuctionLink[i]+'" target=_blank>'+
    '<img src="'+AuctionThum[i]+'" width="'+Math.round(64*ImgWidRatio[i])+'" height="64" hspace="2" vspace="4" border="0" '+
    ' onmouseover="thumbwow(this.alt,this.offsetLeft,this.offsetWidth,'+quot+AuctionDesc[i]+quot+')" '+
    ' title="" alt="'+i+'" ></a>';
    sliderwidth=sliderwidth+Math.round((64*ImgWidRatio[i])+4);
    if (ImgWidRatio[i]>maxWid){maxWid=ImgWidRatio[i]}
}};
var sliderheight="88";
var CrossSellStrip='<nobr>'+CrossSellimages.join("")+'</nobr>';
if (sliderwidth-maxWid*64<parseInt(gallerywidth)){gallerywidth=Math.abs(sliderwidth-maxWid*64)}
function setupGallery(){
    document.write('<table border="0" cellspacing="0" cellpadding="0" style="position:relative; border:'+borderd+' '+slideborder+' solid; background-color:'+slidebgcolor+'; width:'+(parseInt(gallerywidth)+2)+'px; height:90px;"><tr><td valign="top" align="center">');
    document.write('<div style="position:relative;width:'+gallerywidth+'px;height:89px;overflow:hidden;">');
    document.write('<div style="position:absolute;left:0px;bottom:0px;width:'+gallerywidth+'px;height:89px;" onMouseover="scrollamount=0" onMouseout="scrollamount=-1">');
    document.write('<div id="slidegroup1" style="position:absolute;left:0px;bottom:5px;"></div>');
    document.write('<div id="slidegroup2" style="position:absolute;left:-1000px;bottom:5px;"></div>');
    document.write('<div id="blowup" style="position:absolute;left:0px;bottom:0px;visibility:hidden;border:1px '+slideborder+' solid;" onmouseout="unwow()"></div>');
    document.write('</div></div>');
    document.write('</td></tr><tr><td align="center" id="slidelabel" style="padding:2px; font-family:sans-serif; font-size:14px; font-weight:normal; color:'+textcolor+'">');
    document.write(' ');
    document.write('</td></tr></table>');
};
function loadimages(){
    slider1=document.getElementById("slidegroup1");
    slider2=document.getElementById("slidegroup2");
    slider1.innerHTML=CrossSellStrip;
    slider2.innerHTML=CrossSellStrip;
    slider2.style.left=""+sliderwidth+"px";
    startaction=setInterval("slideleft()",parseInt(scrollspeed));
};
function slideleft(){
    if (parseInt(slider1.style.left)>(sliderwidth*(-1)))
      {slider1.style.left=(parseInt(slider1.style.left)+scrollamount)+"px"}
    else
      {slider1.style.left=(parseInt(slider2.style.left)+sliderwidth+scrollamount)+"px"}
    if (parseInt(slider2.style.left)>(sliderwidth*(-1)))
      {slider2.style.left=(parseInt(slider2.style.left)+scrollamount)+"px"}
    else
      {slider2.style.left=(parseInt(slider1.style.left)+sliderwidth)+"px"}
};
function thumbwow(num,thumOffset,thumSize,label){
    if (parseInt(slider1.style.left)<=0){
      if (thumOffset+parseInt(slider1.style.left)>0-thumSize){leftstart=thumOffset+parseInt(slider1.style.left)}else{leftstart=thumOffset+parseInt(slider2.style.left)}
    }
    else {
      if (thumOffset+parseInt(slider2.style.left)>0-thumSize){leftstart=thumOffset+parseInt(slider2.style.left)}else{leftstart=thumOffset+parseInt(slider1.style.left)}
    };
    document.getElementById("blowup").style.left=leftstart+0+(Math.round((thumSize-thumSize/0.8-2)/2))+"px";
    document.getElementById("blowup").innerHTML='<a href="'+AuctionLink[num]+'" title="'+label+'" target=_blank>'+
        '<img src="'+AuctionThum[num]+'" height="80" border="0" ></a>';
    document.getElementById("blowup").style.visibility="visible";
    document.getElementById("slidelabel").innerHTML=label;
};
function unwow(){document.getElementById("blowup").style.visibility="hidden";
    document.getElementById("slidelabel").innerHTML=document.getElementById("slidelabel").title
};
setupGallery();
loadimages();
</script>