자바 스크립트 페이지 카운터

lhym**** 조회수 1,600 2008.04.23

현제 페이지가 몇 페이지 인지 보여주고 싶은걸 만들려고하는데요

고수님들 좀 도와주세요

만약 1 - 13 page 면 next 버튼을 누르면 하나씩 올라가게요

<html>
<head>
    <title></title>
<style type='text/css'>
#gallery {/*갤러리 전체 레이어 파랑색으로 표시*/
width:960px;
height:300px;                 background-image:url('imgs/photo004.jpg');
display:none;
margin:0px;
}
#slideshow {                    /*슬라이드 쇼 전체 레이어*/
display:none;            background-image:url('imgs/photo004.jpg');
}
.gcap {                                 /*갤러리 사진 설명 노랑색으로 표시*/
font-size:12px;font-family:verdana;    /* background:yellow;                         */
margin:3px; padding:0;
}
.scap {                                /*슬라이드 쇼 사진 설명 */
font-size:12px;font-family:verdana;   /*background:red;*/
margin:3px; padding:0;
}
.gcon { /* gallery image/caption container */     /*갤러리 개별 칸 레이어 가로 114px, 세로 120px*/
width:250px;
height:175px;
/* margin:30px;*/

/* background:#CFD4E6;*/
border:1px solid #BF8660;
float:left;
left:10;
margin:15px;
}

/*.ta { ;
}
.te { left:30px;
}*/

.scon { /* slideshow image/caption container */    /*슬라이드 쇼 사진 들어갈 레이어 가로 480px */
width:936px; /*background:#FFFF00;*/
margin:3px;
}
#gallery img {                                     /* gcon 레이어 안에 이미지 들어갈 칸 마진: 6,6,3,6 여백 조정 */
margin:6px 6px 3px 6px; /*background:#FFFF00;*/
}
#slideshow img {                                   /* scon 레이어 안에 이미지 들어갈 칸 마진: 6,6,3,6 여백 조정 */
margin:3px 3px 3px 3px; /*background:red;*/
}
#navigation {
width:959px;/* previous next 등 메뉴 들어갈 레이어 검은색으로 표시 */
margin:1px;
/* text-align:center; */                                 /* background:black;         */
}
#prev, #next, #back, #auto, #time {                /* navigation레이어 안에 들어갈 메뉴들 이름 */
color:#BF8660;
cursor:pointer;
font-weight:bold;
margin-right:20px;
}
.clearAll {
clear:both; /*background:gray;*/
margin:0px; padding:0;
}
</style>

function fullScreen() {
window.open(test.html, '', 'fullscreen=yes'); //풀스크린으로 나타내어라
}

var imgsPerPg = 6; // 썸네일 목록 갯수
var imgsMax = 13; // 이미지 총 갯수
var slideTimeout = 5; // 슬라이드 넘어가는 시간 설정

var gPath = 'imgs/2002/2002sum/'; // 썸네일 이미지 경로 마지막에 / 들어감
var gPrefix = 'image_'; //파일명 접두사
var gSuffix = ''; //파일명 접미사
var gExt = '.jpg'; //파일 확장자
var gZeros = true; // filename uses leading zeros?
var gDigits = 4 // 파일명 카운트(예 : photo001.jpg)=3

var sPath = 'imgs/2002/'; //큰이미지 경로
var sPrefix = 'image_'; // 파일명 접두사
var sSuffix = ''; //파일명 접미사
var sExt = '.jpg'; //파일 확장자
var sZeros = true; // filename uses leading zeros?
var sDigits = 4 // 파일명 카운트(예 : photo001.jpg)=3

var captions = new Array();

captions[0] = "사진 설명 1";
captions[1] = "사진 설명 2";
captions[2] = "사진 설명 3";
captions[3] = "사진 설명 4";
captions[4] = "사진 설명 5";
captions[5] = "사진 설명 6";
captions[6] = "사진 설명 7";
captions[7] = "사진 설명 8";
captions[8] = "사진 설명 9";
captions[9] = "사진 설명 10";
captions[10] = "사진 설명 11";
captions[11] = "사진 설명 12";
captions[12] = "사진 설명 13";
//captions[13] = "사진 설명 14";
//captions[14] = "사진 설명 15";
//captions[15] = "사진 설명 16";
//captions[16] = "사진 설명 17";
//captions[17] = "사진 설명 18";
//captions[18] = "사진 설명 19";
//captions[19] = "사진 설명 20";

// End User Configurable Variables

window.onload = function()
{
xImgGallery();
}

var galMode = true;
var autoSlide = true;
var slideTimer = null;
var slideCounter = 0;
var currentSlide = 1;

function gal_setNav(n)
{
var ipp = galMode ? imgsPerPg : 1;
// Next
var e = document.getElementById('next');
if (n + ipp <= imgsMax) {
    e.nextNum = n + ipp;
    e.onclick = next_onClick;
    e.style.display = 'inline';

}
else {

e.nextNum = 1;
}

// Previous
e = document.getElementById('prev');
e.style.display = 'inline';
e.onclick = prev_onClick;
//////////////////////////////////////////////////////////////////////
///// 페이지 넘버링///
//function count
//{
//var e = document.getElementById('next');
//var co = 13;
//for (i=0;i < co ; ++i )
//{

//}
//}

//////////////////////////////////////////////////////////

if (n > ipp) {
    e.prevNum = n - ipp;
}
else {
    e.prevNum = galMode ? normalize(imgsMax) : imgsMax;
}
// Back
e = document.getElementById('back');
if (!galMode) {
    e.onclick = back_onClick;
    e.style.display = 'inline';
    e.backNum = normalize(n);
}
else {
    e.style.display = 'none';
}

// Auto Slide
e = document.getElementById('auto');
if (!galMode) {

e.onclick = auto_onClick;
e.style.display = 'inline';

}
else {
e.style.display = 'none';
}

}
function normalize(n)
{
return 1 + imgsPerPg * (Math.ceil(n / imgsPerPg) - 1);
}
function next_onClick(e)
{
gal_paint(this.nextNum);
var co = document.getElenmentById('counter');
for (i=0;i > imgsMax ;++i )
{
co = co + 1;
}

}
function prev_onClick(e)
{
gal_paint(this.prevNum);
}
function back_onClick(e)
{
galMode = true;
if (slideTimer) {
clearTimeout(slideTimer);
}
autoSlide = false;
gal_paint(this.backNum);
document.getElementById('time').style.display = 'none';
}

/////////////////////////////////////오토
function auto_onClick(e)
{
var ele = document.getElementById('time');
autoSlide = !autoSlide;
if (autoSlide) {
    slideCounter = 0;
    slideTimer = setTimeout("slide_OnTimeout()", slideTimeout);
    ele.style.display = 'inline';

}
else if (slideTimer) {
clearTimeout(slideTimer);
ele.style.display = 'none';
}
}

function slide_OnTimeout()
{
slideTimer = setTimeout("slide_OnTimeout()", 1000);
++slideCounter;
document.getElementById('time').innerHTML = slideCounter + '/' + slideTimeout;
if (slideCounter == slideTimeout) {

    if (++currentSlide > imgsMax) currentSlide = 1;
    gal_paint(currentSlide);
    slideCounter = 1;
//  gal_paint.filters.blendTrans.apply();
//      document.gal_paint = this.nextNum;
//      gal_paint.filters.blendTrans.duration=1;
//      gal_paint.filters.blendTrans.play();
}
}

/* xGetURLArguments and xPad are part of the X library,
   distributed under the terms of the GNU LGPL,
   and maintained at Cross-Browser.com.
*/
function xGetURLArguments()
{
var idx = location.href.indexOf('?');
var params = new Array();
if (idx != -1) {
    var pairs = location.href.substring(idx+1, location.href.length).split('&');
    for (var i=0; i<pairs.length; i++) {
      nameVal = pairs[i].split('=');
      params[i] = nameVal[1];
      params[nameVal[0]] = nameVal[1];
    }
}
return params;
}
function xPad(str, finalLen, padChar, left)
{
if (typeof str != 'string') str = str + '';
if (left) { for (var i=str.length; i<finalLen; ++i) str = padChar + str; }
else { for (var i=str.length; i<finalLen; ++i) str += padChar; }
return str;
}
</script>

</head>
<body >

<div id='gallery'>
<div class=te>
    <div class='gcon'><img id='g1'><div class='gcap' id='gc1'> </div></div>
    <div class='gcon'><img id='g2'><div class='gcap' id='gc2'> </div></div>
    <div class='gcon'><img id='g3'><div class='gcap' id='gc3'> </div></div>

    <div class='clearAll'> </div>
</div>
<div class=ta>
<div class='gcon'><img id='g4'><div class='gcap' id='gc4'> </div></div>
    <div class='gcon'><img id='g5'><div class='gcap' id='gc5'> </div></div>
    <div class='gcon'><img id='g6'><div class='gcap' id='gc6'> </div></div>

    <div class='clearAll'> </div>
</div>
</div>
<div id='slideshow'>
<div class='scon'><img id='s1' style="filter: blendTrans(duration=1);"><div class='scap' id='sc1'> </div></div>
</div>
<div id='navigation' align=center>
<span id='prev'>« Previous</span>
<span id='next'>Next »</span>
<p><span id='back'>Back to the Gallery</span></p>
<p><span id='auto' title='Toggle Auto-Slide'>Auto-Slide</span> <span id='time'> </span></p>
<p id=counter> 1 </p>
</div>

</body>
</html>

위에 소스 올렷습니다.

현제 페이지가 몇 페이지 인지 보여주고 싶은걸 만들려고하는데요

고수님들 좀 도와주세요

만약 1 - 13 page 면 next 버튼을 누르면 하나씩 올라가게요

답변자님,

정보를 공유해 주세요.

1 개 답변

ye****

고수

자바스크립트, C, C++, C# 분야에서 활동

안녕하세요....^^

오타 난 부분 빨간색으로 수정 했습니다...^^

그대로 긁어다가 사용하시면 되요...

/* background:#CFD4E6;*/
border:1px solid #BF8660;
float:left;
left:10;
margin:15px;
}

/*.ta { ;
}
.te { left:30px;
}*/

function fullScreen() {
window.open(test.html, '', 'fullscreen=yes'); //풀스크린으로 나타내어라
}

var imgsPerPg = 6; // 썸네일 목록 갯수
var imgsMax = 13; // 이미지 총 갯수
var slideTimeout = 5; // 슬라이드 넘어가는 시간 설정

var captions = new Array();

// End User Configurable Variables

window.onload = function()
{
xImgGallery();
}

var galMode = true;
var autoSlide = true;
var slideTimer = null;
var slideCounter = 0;
var currentSlide = 1;

}
else {

e.nextNum = 1;
}

//}
//}

//////////////////////////////////////////////////////////

// Auto Slide
e = document.getElementById('auto');
if (!galMode) {

e.onclick = auto_onClick;
e.style.display = 'inline';

}
else {
e.style.display = 'none';
}

}
function normalize(n)
{
return 1 + imgsPerPg * (Math.ceil(n / imgsPerPg) - 1);
}
function next_onClick(e)
{
gal_paint(this.nextNum);
var co = document.getElementById("counter"); //오타 에요.....^^
for (i=0;i > imgsMax ;++i )
{
co = co + 1;
}

}
function prev_onClick(e)
{
gal_paint(this.prevNum);
}
function back_onClick(e)
{
galMode = true;
if (slideTimer) {
clearTimeout(slideTimer);
}
autoSlide = false;
gal_paint(this.backNum);
document.getElementById('time').style.display = 'none';
}

}
else if (slideTimer) {
clearTimeout(slideTimer);
ele.style.display = 'none';
}
}

    if (++currentSlide > imgsMax) currentSlide = 1;
    gal_paint(currentSlide);
    slideCounter = 1;
// gal_paint.filters.blendTrans.apply();
//      document.gal_paint = this.nextNum;
//      gal_paint.filters.blendTrans.duration=1;
//      gal_paint.filters.blendTrans.play();
}
}

</head>
<body >

</body>
</html>

2008.04.24.

출처
나

도움이 되었다면 UP 눌러주세요!
UP이 많은 답변일수록 사용자들에게 더 많이 노출됩니다.

공식블로그 바로가기

NAVER

지식iN

검색영역

메인 메뉴