jQuery / Ajax：图像滑块

小编典典

jQuery / Ajax：图像滑块

ajax

有一行可以一次只容纳三个图像，但是我在服务器中有几个图像，我想全部取走。所以在这种情况下，我需要图像滑块。

让说，有10幅图像，例如img_1,img_2,img_3,........img_10和行和它包含只有三个images img_1, img_2, img_3非常久远Left_slider_button & Right_slider_button。我想要的是？单击slider_button时，图像应沿按钮方向一一向前。假设，如果我点击left_slider_button则img_2, img_3, img_4应该行，而不是img_1, img_2, img_3。因此，有一幅图像被转发到左方向，而另一幅新图像被提取为img_4.

请给我一些提示。我想AJAX从服务器获取图像会更有用，对吗？

阅读 282

2020-07-26

共1个答案

小编典典

您可以将图像名称放入一个数组中，然后遍历它们。我使用了三个div来保存图像，但是您可以使用任何东西。

$(function () {
    var images = ["img_1", "img_2", "img_3", "img_4", "img_5", "img_6", "img_7", "img_8", "img_9", "img_10"],
        curIndex = 0,
        gotoImage = function (index) {
            $('#images div').each(function (i) {
               var image = curIndex + i;
                if (image >= images.length) {
                    image = image - images.length;
                }
               $(this).html(images[image]);
               // Use something like this to show images instead of text
               // $(this).html('<img src="' + images[image] + '.jpg" />');
            });            
        };

    $('.prev').click(function (e) {
        curIndex--;
        if (curIndex === -1) {
            curIndex = images.length - 1;
        }
        gotoImage(curIndex);
    });

    $('.next').click(function (e) {
        curIndex++;
        if (curIndex === images.length) {
            curIndex = 0;
        }
        gotoImage(curIndex);
    });
});

这是一个示例：http :
//jsfiddle.net/rustyjeans/c3sJW/

除非您不知道图像列表是什么，否则无需使用Ajax加载图像。如果要从数据库中提取图像名称列表，则可以使用ajax将数据取出并放入数组中，然后可以将其分配给数组images。

2020-07-26