jQuery UI 图像滑块

Question

我对我的 jQuery UI 图像滑块有疑问。我喜欢添加两个以上的图像来改变，但我不知道怎么做。我应该更改什么以添加更多图像以使用滑块进行更改？ 以及如何使图像居中，此时它向左浮动。 非常感谢！

$(function() {
  $("#slider1").slider({
    min: 0,
    max: 2,
    step: 1,
    change: function(event, ui) {
      if (ui.value == 1) {
        $('#flask').attr('src', 'img/tweet1.png');
      } else {
        $('#flask').attr('src', 'img/tweet2.png');
      };
    }
  });
});

#slider1 {
  align-content: center;
  margin-left: 15em;
  margin-right: 15em;
  margin-top: 5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="img/tweet2.png" height="270" width="600" id="flask" />
<div id="slider1">

Answer 1

这需要对您的图片进行特定命名。如果您可以从服务器端脚本获取图像数量，这也会很有帮助，因为它可以设置最大值。

$(function() {
  // Set to the number of images you will have
  var myMax = 2;
  $("#slider1").slider({
    min: 0,
    max: myMax,
    step: 1,
    change: function(event, ui) {
      // All images must be named correctly: tweetN.png where N is a number
      // if statement in case you want to use 0 position to start with no image 
      if(ui.value > 0){
        $('#flask').attr('src', 'img/tweet' + ui.value + '.png');
      }
    }
  });
});

#slider1 {
  align-content: center;
  margin-left: 15em;
  margin-right: 15em;
  margin-top: 5em;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<img src="img/tweet2.png" height="270" width="600" id="flask" />
<div id="slider1"></div>

如果图像有不同的名称，您还可以创建一个数组并通过 Slider 迭代数组的每个位置。

示例

$(function() {
  var myImages = [
    "img/tweet1.png",
    "img/tweet2.png",
    "img/logo3.jpg",
    "img/splash4.gif"
  ];
  $("#slider1").slider({
    min: 0,
    max: (myImages.length - 1),
    step: 1,
    change: function(event, ui) {
      $('#flask').attr('src', myImages[ui.value]);
    }
  });
});

很多选择。同样，如果您可以访问 PHP 等服务器端脚本，则可以执行 ajax 调用并获取当前图像的列表。这样，您只需将图像放到一个文件夹中，脚本就会知道它们在那里。

希望对您有所帮助。

Answer 2

也许您应该尝试增加“max”值，然后添加与您拥有的图像一样多的 if 语句。这是一个例子：

$(function() {
  $("#slider1").slider({
    min: 0,
    max: 4,
    step: 1,
    change: function(event, ui) {
      if (ui.value == 1) {
        $('#flask').attr('src', 'img/tweet1.png');
      } 
      if (ui.value == 2) {
        $('#flask').attr('src', 'img/tweet2.png');
      };
      if (ui.value == 3) {
        $('#flask').attr('src', 'img/tweet2.png');
      };
    }
  });
});