JavaScript slider

Question

我需要为客户的网站创建一个“ slider ”。 slider 应该允许人们选择他们想要的 x 商品的数量，并显示基于此的价格。奇怪的是，随着商品数量的增加，价格上涨的比例会下降:

• 1 件商品:100 美元
• 2 件商品:+90 = 190 美元
• 3 件商品:+ 80 = 270 美元
• 4 件商品:+ 70 = 340 美元
• 5 件商品:+ 60 = 400 美元
• 6 件商品:+ 50 = 450 美元
• 7 件商品:+ 50 = 500 美元

从那时起所有的增幅都是+50。这可能看起来是一个过于简单的问题，但有人知道我该怎么做吗？我几乎没有 JavaScript 经验:(

Answer 1

查看雅虎!用户界面。他们有一个 slider 小部件:http://developer.yahoo.com/yui/slider/

以下示例应该可以帮助您入门:http://developer.yahoo.com/yui/examples/slider/slider-ticks.html .

所有 JavaScript 框架( jQuery 、 MooTools )似乎都提供 slider 。 YUI 将为您提供大量控制和加载程序，因此您不必在服务器上托管脚本。请注意，YUI 并不像我提到的另外两个那样轻松实现。

这是一个 MooTools 示例:

// First example of http://demos.mootools.net/Slider

<div class="slider" id="myslider">
      <div class="knob" style="position: relative;"/>
    </div>

和 JavaScript:

var el = $('myslider'); // The slider graphic
new Slider(el, el.getElement('.knob'), {
    steps: 7,   // There are 7 choices
    range: [1, 7],  // Minimum value is 1, maximum is 7
    onChange: function(value){
        // Calculation of the value goes here
    }
});