javascript - 根据 slider 内容更改多个元素内容/背景

Question

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

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

更新问题:此时此刻我没有代码，我想知道是否有人可以指出我正确的方向。我正在使用 Ruby on Rails 制作在线应用程序。此刻我不愁Rails这边，我先要征服JQuery。我有六种酱汁，每一种都有名称、图片和描述。我要实现的是如图所示页面从酱一开始，当点击右箭头时，酱一号变成酱二号，图片变了，相关的描述也变了(即酱二的描述。

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

简而言之，一切都是动态发生的，不是我已经准备好 div，JQuery 只是 chop 它们(即不是 Jquery div slider )。

这是图片:

Answer 1

我建议使用一个已经制作好的 jQuery slider ，就像这个:

http://basic-slider.com/

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