0

基本上我想为我正在处理的 JQuery 图片库创建下一个和上一个按钮。每个按钮的 id 分别为“next”和“prev”。我想要做的是更改图库中主图像源中的一个数字（其 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(){

        });
}());
4

2 回答 2

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)));
 });
}());
于 2013-03-06T04:30:19.693 回答
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'));
        }
    });
});
于 2013-03-06T06:26:59.563 回答