jQuery / 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从服务器获取图像会更有用，对吗？
您可以将图像名称放在一个数组中，然后循环它们。 我使用了三个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('
'); }); }; $('.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 。