根据滑块内容更改多个元素内容/背景

Question

我使用页面模拟设计的photoshop制作了一个图像，这样你就可以直观地看到我想要实现的目标。

请在尝试回答时查看此问题末尾的图像。

更新了问题： 在这个时刻，我没有代码，我想知道是否有人可以指出我正确的方向。我正在使用Ruby on Rails创建在线应用程序。此刻我并不担心Rails方面，我首先想要征服JQuery。我有六个酱汁，每个都有一个名字，一张图片和一个desctiption。我想要实现的是页面从酱油一开始，如图所示，当点击右箭头时，酱汁1变成酱汁2，图片改变，相关描述改变（即酱汁编号2的描述。< / p>

我的主要问题是我不知道如何在两个箭头之间插入相关内容，然后在按下箭头时让它们改变。即用户可以单击右箭头一次，我可以更改内容，但是如何设置jQuery，以便第二次点击箭头时，它成为第二次酱，第三次是第三次酱，依此类推按时间顺序排列，所以当他们点击后箭头时，它会转到当前的酱汁之前。

简而言之，一切都发生了动态，而不是我已经准备好div了，而JQuery只是截断它们（即不是Jquery div滑块）。

这是图像：

Answer 1

我建议使用已经制作的jQuery滑块，如下所示：

http://basic-slider.com/

对于滑块中使用的每个li，都有一个带有图像和描述的div。您需要稍微修改滑块css，但我认为这比自己制作滑块要容易得多。

Answer 2

这些是用jquery实现你想要的东西的良好开端：

动画：http://api.jquery.com/animate/

抓取点击：http://api.jquery.com/click/

显示/隐藏元素：http://api.jquery.com/show/ http://api.jquery.com/hide/

设置元素的html：http://api.jquery.com/html/

如果您对这些功能的任何特定问题有疑问，您可以再次询问或只搜索Stackoverflow，很有可能您已经回答过任何问题。