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

标签 javascript jquery html css

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

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

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

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

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

这是图片:

The image

最佳答案

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

http://basic-slider.com/

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

关于javascript - 根据 slider 内容更改多个元素内容/背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13126909/

相关文章:

javascript - 使 jquery 上加载的图像在单个图像中淡入淡出

javascript - jQuery - 从表行复制字段并将其粘贴到其他字段

javascript - 附加内容后没有 css 样式(使用 ajax)

javascript - 如何使用javascript或php获取访问者或用户的IP地址,ISP,县和城市?

javascript - 如何删除任意框中上传的图片?

javascript - IE 阻止键盘滚动上的选择列表更改事件

虚拟目录中的 Javascript 不知道虚拟目录

html - href 区域太大,大,试过 inline-block

html - 使用 Bootstrap 设计导航栏按钮

javascript - 使用 jquery 计算价格和 TVA