jQuery的/阿贾克斯：图像滑块 [英] jQuery/Ajax : image slider

问题描述

有一排它可以一次容纳只有三个图像，但我有几个图像服务器和所有我想要获取。所以在这种情况下，我需要像滑块。

There is a row which can accommodate only three images at once but i have several images in server and all i want to fetch. so in that case i need image slider.

让说，有10个图像例如 img_1，img_2，img_3，........ img_10 和一排及放大器;它包含了只有三个图像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。

Let say there are 10 images e.g. img_1,img_2,img_3,........img_10 and a row & it contains only three images img_1, img_2, img_3 alongwith Left_slider_button & Right_slider_button. What i want? When click on slider_button the images should forward in button direction one by one. Suppose if i click on left_slider_button then img_2, img_3, img_4 should be in row instead of img_1, img_2, img_3. So There is one image forwarded to left direction and one new image fetched as img_4.

请给我一些建议。我猜 AJAX 办法是从服务器上获取的影像更有用，对不对？

please give me some tips. I guess AJAX would be more useful to fetch the images from server, Right?.

推荐答案

您可以通过它们放在一个阵列图像的名称，然后循环。我用了三个div的保持图像，但你可以使用任何东西。

You can put your image names in an array and then loop through them. I used three div's to hold the images but you could use anything.

$(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来加载图像，除非你不知道什么图像列表将是。如果你拉图像名称的列表从DATABSE你可以使用Ajax来获取这些数据，并把它放在一个数组，那么你可以赋值给数组图片。

There's no need to use ajax to load the images, unless you don't know what the list of images is going to be. If you're pulling the list of image names from a databse you could use ajax to get that data out and put it in an array, then you could assign that to the array images.

这篇关于jQuery的/阿贾克斯：图像滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！