Question

基本上我想为我正在研究的JQuery图像库创建下一个和上一个按钮。每个按钮的ID为＆＃34; next＆＃34;和＆＃34; prev＆＃34;分别。我想要做的是更改库中主图像源中的数字（其id为mainImg）。我已经能够在每个图像的源中定位数字，但我似乎无法正确地增加它，然后用新的递增数字替换当前图像的源编号。我尝试使用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

以下是修订后的代码。正则表达式将更好地工作。用户可以多次单击下一个按钮，但不会跳过任何图像，因为如果加载下一个图像，主图像将仅转到下一个图像。因此，如果您快速单击下一次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)));
 });
}());

Answer 2

这应该可以解决您的问题

$(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'));
        }
    });
});

单击时图像源中的增量编号

2 个答案: