根据滑块内容更改多个元素内容/背景 [英] Change multiple element contents/background depending on slider contents

查看:96
本文介绍了根据滑块内容更改多个元素内容/背景的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用Photoshop制作了一张图片,使用模拟设计的页面,所以你可以直观地看到我想达到的效果。

I have made an image using photoshop of a mock design of the page so you can visually see what I am trying to achieve.

请看图片

更新的问题:
此时,我没有代码,我想知道是否有人可以指向我正确的方向。我使用Ruby on Rails在线应用程序。此时我并不担心Rails端,我首先想征服JQuery。我有六个酱汁,每个都有一个名字,一个图片和一个desctiption。我想实现的是页面开始在酱汁一,如图所示,当右箭头被点击,酱料号1变为酱料号2,图片改变,并相关的描述更改(即酱2号的描述。

Updated Question: At this moment in time I have no code, I was wondering if someone could point me in the correct direction. I am making an online application using Ruby on Rails. At this moment I am not worried about the Rails side, I firstly want to conquer the JQuery. I have six sauces, each with a name, a picture, and a desctiption. What I want to achieve is the page starts on sauce one as shown in the picture, when the right arrow is clicked, sauce number 1 becomes sauce number 2, the picture changes, and the relevant description changes (i.e. sauce number 2's description.

我的主要问题是我不知道如何适应两个箭头之间的相关内容,然后让他们改变为箭头按下,即用户可以点击右箭头一次我可以改变内容,但是如何设置jQuery,这样当第二次点击箭头时,它成为第二次酱,第三次第三次酱,等等,按时间顺序,所以当他们点击后退箭头它在当前一个之前去酱。

My main problem is I do not know how to fit the relevent content between the two arrows, and then get them to change as the arrows are pressed. I.e. the user can click the right arrow once and I can change the contents, but how to I set the jQuery so that when the arrow is clicked the second time, it becomes the second sauce, the third time the third sauce and so on, as in chronological order, so when they click the back arrow it goes to the sauce before the current one.

简而言之,一切发生动态,我已经准备好了所有的div,JQuery只是截断它们(即不是一个Jquery div滑块)。

In a nutshell everything happens dynamically, not that I have divs all ready, and the JQuery just truncates through them (i.e. not a Jquery div slider).

这是图片:

推荐答案

我建议使用已经创建的jQuery滑块,如下:

I would recommend using an already made jQuery slider, like this one:

http://basic-slider.com/

对于在滑块,具有图像和描述的div。你需要修改滑块css一点点,但我认为这将是一个很容易做一个滑块自己。

For each li used in the slider, have a div with the image and description. You would need to modify the slider css a little bit but I think it would be a lot easier than making a slider yourself.

这篇关于根据滑块内容更改多个元素内容/背景的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆