-1

次と前の2つのボタンがあるページに10枚の画像があります。次に、1 番目の画像から 10 番目の画像に、前のボタンではその逆に移動したいと考えています。これは私のhtmlコードです:

   <div id="Div1"> <img class='display' src=""  alt="adf"/></div>
    <button id="Button1">prev</button>
    <button id="Button2">next</button>
<div id='Div2'>
     <img src="a_large.jpg" alt="aadf" />
    <img src="b_large.jpg" alt="dfD" />
     <img src="c_large.jpg" alt="aadf" />
    <img src="d_large.jpg" alt="dfD" />
     <img src="e_large.jpg" alt="aadf" />
    <img src="f_large.jpg" alt="dfD" />
     <img src="g_large.jpg" alt="aadf" />
    <img src="h_large.jpg" alt="dfD" />
     <img src="i_large.jpg" alt="aadf" />
    <img src="j_large.jpg" alt="dfD" />
    </div>

私はjQueryの初心者です。次と前のボタンのコードを教えてください。前もって感謝します。

4

2 に答える 2

0

Here's a way to prepload the images and then cycle through the preloaded images on your buttons:

// preload images
var preloads = [];
var imageIndex = 0;
function preloadImages() {
    var img, base = "a".charCodeAt(0);
    for (var i = 0; i < 10; i++) {
        img = new Image();
        img.src = String.fromCharCode(base + i) + "_large.jpg";
        preloads.push(img);
    }
}

preloadImages();

$(document).ready(function() {
    $("#Button2").click(function() {
        ++imageIndex;
        if (imageIndex >= preloads.length) {
            imageIndex = 0;
        }
        $("#Div1 .display").attr("src", preloads[imageIndex].src);
    });

    $("#Button1").click(function() {
        --imageIndex;
        if (imageIndex < 0) {
            imageIndex = preloads.length - 1;
        }
        $("#Div1 .display").attr("src", preloads[imageIndex].src);
    });

    // load the first image        
    $("#Div1 .display").attr("src", preloads[imageIndex].src);

});    
​

Demonstration (without the actual images): http://jsfiddle.net/jfriend00/MKHJC/

于 2012-08-27T10:12:18.763 に答える
0

div1 つだけを表示する必要がある場合は、すべての画像を 内に保持しないでください。次のように、画像の名前を配列内に保持します。

arrimg = ['a_large.jpg','b_large.jpg','b_large.jpg'...'j_large.jpg']

indプロパティの値を 0 にして、最初の画像のみを最初に保持します。

<div id='Div2'>
  <img src="a_large.jpg" alt="aadf" ind = '0' />
</div.

次に、次のようにします (to ボタンに say のクラスを割り当ててbutton、コードの行数を減らします):

$(".button").click(function() {
   if ($(this).prop('id') == 'Button1') {
     if ($("#Div2 img").prop('ind') != 0) {
        ind = parseInt($("#Div2 img").prop('ind'));
        $("#Div2 img").prop({'src': arrimg[ind-1],'ind':(ind-1)+"");
    }
    else {
         $("#Div2 img").prop({'src': arrimg[9],'ind':'9');
    }
    }
    else {
       if ($("#Div2 img").prop('ind') != 9) {
        ind = parseInt($("#Div2 img").prop('ind'));
        $("#Div2 img").prop('src': arrimg[ind+1],'ind': (ind+1)+"");
    }
    else {
         $("#Div2 img").prop('src': arrimg[0],'ind':0});
    }
    }          
});
于 2012-08-27T10:01:16.030 に答える