10行左右的图像转盘

Image carousel in 10 lines or so

本文关键字：图像 左右 10行      更新时间：2023-12-02

我有一个PHP/MMySQL前端问题。我设置了一个循环，返回20个列表项，这些项是水平堆叠的图像。现在，我很感激一些jQuery代码的帮助，它可以做两件事：

I。仅显示20个项目中的4个--图像1、2、3、4。

II。点击事件：

（a） 如果单击下一个按钮，则在下一组四张幻灯片中滑动到视图中，即图像5、6、7、8。当再次点击下一个时，在图像9、10、11、12中滑动，依此类推

（b） 如果单击上一个按钮，请在上一组四张幻灯片中滑动。。。

如何做到这一点？如果超过10行，请提供代码或链接。

首先，您需要进行一些css修改，其中css一次只允许显示20个项目中的4个。

#image-container { width: 800px; overflow: hidden; }

上面的代码假设图像容器为ID，并且假设每个图片都是200px宽。溢出隐藏会隐藏任何大于800px的内容，因此只显示四个图像。

其次，您希望对点击事件使用jQuery，并且您的代码看起来像这样。。

$(document).ready(function(){
    $('#next-button').click(function(){
        $('img:first-child').animate({left: '-200px'}, 800);
});
});

您必须非常精确地设置它，并且需要大量的html/css/和jquery知识。或者你可以找到一个插件来为你做大部分艰苦的工作。上面的jQuery代码只是一个例子，您正在尝试做的事情将包括至少是我发布的jQuery数量的3-5倍。

相关文章：