0

基本的に、私が取り組んでいる JQuery イメージ ギャラリーの次と前のボタンを作成したいと考えています。各ボタンには、それぞれ「次へ」と「前へ」の ID があります。私がやろうとしているのは、ギャラリーのメイン画像のソースにある番号 (mainImg の 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(){

        });
}());
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 に答える