jquery - jQuery中的图像旋转

Question

我在一个有 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 的新手。你能告诉我下一个和上一个按钮的代码吗？提前致谢。

Answer 1

当您只需要显示时，不要将所有图像div保留在 1. 将图像的名称保留在数组中，例如：

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

最初只保留第一个图像，属性值为 0 ind：

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

然后做类似的事情（给你的按钮分配一个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});
    }
    }          
});

Answer 2

这是一种预加载图像的方法，然后循环浏览按钮上的预加载图像：

// 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/