Question

我使用了3个noUISliders。我想结合3个滑块的输出来创建一个html输出。具体来说，我想使用组合来选择图像文件（即img135.jpg），其中1是第一个滑块的输出，3是第二个滑块，5是第三个滑块。我有27张图片 - 我希望能够根据3张幻灯片的合成输出选择一张（111.jpg，211.jpg，311.jpg等，通过555.jpg）。

我有三个提供输出的滑块：

＆＃13;

var slider1 = document.getElementById('slider1');

noUiSlider.create(slider1, {
  start: 1,
  connect: 'lower',
  orientation: 'horizontal',
  range: {
    'min': 1,
    'max': 5
  },
  snap: true,
  format: wNumb({
    decimals: 0
  })
});



var sliderOutput1 = document.getElementById('value-slider1');

slider1.noUiSlider.on('update', function(values, handle) {
  sliderOutput1.innerHTML = values[handle];
});


var sliderOutput2 = document.getElementById('value-slider2');

slider2.noUiSlider.on('update', function(values, handle) {
  sliderOutput2.innerHTML = values[handle];
});


var sliderOutput3 = document.getElementById('value-slider3');

slider3.noUiSlider.on('update', function(values, handle) {
  sliderOutput3.innerHTML = values[handle];
});


var image_path = 'img' + sliderOutput1.val() + sliderOutput2.val() + sliderOutput3.val() + '.jpg';

("#img").html(image_path);

＆＃13;

<div id="slider1"></div>
<div id="slider2"></div>
<div id="slider3"></div>


<span id="value-slider1"> </span>
<span id="value-slider2"> </span>
<span id="value-slider3"> </span>

<div id="img"></div>

＆＃13;

滑块全部输入并输出值。我需要有关如何采取下一步的建议。我是jscript的新手，所以你能提供的任何帮助或建议都会非常感激。

肯

Answer 1

你可以让它变得更加漂亮，但是像下面这样的简单模式应该没问题：

function updatePicture() {
    var image_path = 'img' + sliderOutput1.val() + sliderOutput2.val() + sliderOutput3.val() + '.jpg';

    // I assume the missing $ was a typo
    $("#img").html(image_path);
}

slider1.noUiSlider.on('update', function(values, handle) {
  sliderOutput1.innerHTML = values[handle];
  updatePicture();
});


var sliderOutput2 = document.getElementById('value-slider2');

slider2.noUiSlider.on('update', function(values, handle) {
  sliderOutput2.innerHTML = values[handle];
  updatePicture();
});


var sliderOutput3 = document.getElementById('value-slider3');

slider3.noUiSlider.on('update', function(values, handle) {
  sliderOutput3.innerHTML = values[handle];
  updatePicture();
});

基本上，当任何滑块发生变化时，您会收到一个事件，然后继续更新其输出文本（您自己已经完成），最后一步是触发图像刷新功能，该功能结合了三个输出进入一条可用的道路。

顺便提一下有趣的滑块库，我以前从未见过它！

NoUIslider - 组合输出值以创建html

1 个答案: