클릭시 이미지 소스의 숫자 증가

Question

기본적으로 나는 작업중인 JQuery 이미지 갤러리에 대해 다음 및 이전 버튼을 만들고 싶습니다. 각 버튼의 ID는 각각 "next"와 "prev"입니다. 내가하려고하는 것은 갤러리 (메인 ID가 id 인)의 메인 이미지의 소스에있는 숫자를 변경하는 것입니다. 각 이미지의 소스 내에서 숫자를 타겟팅 할 수 있었지만 올바르게 증가시키지 못하고 현재 이미지의 소스 번호를 새롭게 증가 된 숫자로 바꿀 수 없습니다. while 루프, for 루프, if 문을 사용해 보았지만 제대로 작동하지 않았습니다. 지금까지 가지고있는 갤러리를 보려면 여기에 업로드했습니다 : http://tiger.towson.edu/~abarso2/463/projecta/index.html 내 script.js 파일에 들어가면 하단에 주석 처리 된 블록이 표시됩니다. 그것이 지금까지 이미지 소스 내의 숫자를 대상으로하고 정수로 파싱하는 함수입니다. 모든 도움을 미리 감사드립니다.

는 여기에 내가 현재 가지고있는 작업은 다음과 같습니다

여기

(function(){ 
    var mainImg = $('#mainImg').attr('src'); 
    var mainImgStr = mainImg.charAt(mainImg.length - 5); 
    var mainImgNum = parseInt(mainImgStr); 
     $('#next').click(function(){ 

     }); 
}()); 

Answer 1

이 문제 당신은 복사/솔리드 답을 얻기의 당신의 기회를 증가 할 경우, 귀하의 질문에 지금까지 무엇을 붙여 넣을 수 있습니다

$(function(){ 
    var mainImg = $('#mainImg'); 
    var slidshow = $('#slideShow'); 

    $('#next').click(function(){ 
     var src = mainImg.attr('src').replace('thumb','shot'); 
     var next = $('img[src="' + src +'"]', slidshow).next(); 
     if(next.length){ 
      mainImg.attr('src',next.attr('src').replace('thumb','shot')); 
     } 
    }); 

    $('#prev').click(function(){ 
     var src = mainImg.attr('src').replace('thumb','shot'); 
     var prev = $('img[src="' + src +'"]', slidshow).prev(); 
     if(prev.length){ 
      mainImg.attr('src',prev.attr('src').replace('thumb','shot')); 
     } 
    }); 
}); 

Answer 2

는 수정 된 코드입니다. regexp가 더 잘 작동합니다. 사용자는 다음 버튼을 여러 번 클릭 할 수 있지만 이미지를 건너 뛰지는 않습니다. 주 이미지는 다음 이미지가로드 될 때와 다음 이미지로만 이동하기 때문입니다. 따라서 다음 번에 빠르게 5 번 클릭하면 다음 이미지 만 표시됩니다 (4 개의 이미지를 건너 뛰지 않음).

(function(){ 
// replace all non digit characters from src 
// only the last set of numbers so www.123.com/image7.jpg 
// will give us 7 
function getNumber(src){ 
    return parseInt(src.replace(/[\d]+(?=[\/])/g,"") 
    .replace(/[^\d]/g,""),10); 
} 
// replaces last number of a source with the number provided 
// www.123.com/imgage7.jpg will be www.123.com/image8.jpg 
// if number 8 is given 
function setNumber(src,num){ 
    return src.replace(/[\d]+(?![\d])/g,num); 
} 
var $mainImg = $('#mainImg'); 
$('#next').click(function(){ 
    var src= $mainImg.attr('src'), 
    mainImgNum = getNumber(src); 
    var $img=$(document.createElement("img")); 
    $img.data("checkNext",false); 
    $img.on("load",function(){ 
    // image exsist, load it as main image src 
    if($img.data("checkNext")===true){ 
     $img.remove(); 
    }else{ 
     $mainImg.attr('src',$img.attr('src')); 
     $("#prev").show(1000); 
     $img.data("checkNext",true); 
     $img.attr('src',setNumber($img.attr('src'), 
     new String(mainImgNum+2)); 
    }); 
    $img.on("error",function(){ 
    if($img.data("checkNext")===true){ 
     $("#next").hide(1000); 
    } 
    // clean up 
    $img.remove(); 
    }); 
    $img.attr('src',setNumber(src,new String(mainImgNum+1))); 
}); 
}());