Question

嘿伙计们正在做一些乱搞并学习一些新的东西来消磨时间，我正在摆弄javascript，我遇到了一个问题。

所以问题是我已经下载了一个简单的淡入淡出幻灯片的互联网上的小jQuery幻灯片的东西（我已经把它砍成碎片去除我认为不必要的东西）并且我试图让它运行两个独立的幻灯片同时。我希望这些幻灯片有宽度和高度的不同尺寸，最好是过渡时间，我的问题是该功能只会运行一个幻灯片。

$(document).ready(function(){
    $('#slideshow').fadeSlideShow({
        width: 300,
        height: 343,
    });

有没有办法可以将#slideshow更改为#slideshow1，然后让它与#slideshow同时运行在同一位代码上？显然我可以改变一些名字并且有大量的文字但是id更喜欢找到更简洁的方式。

我相当新手，所以任何建议都非常感谢

Answer 1

$(document).ready(function()
{
     $('#slideshow').fadeSlideShow({ width: 300, height: 343 });
     $('#slideshow1').fadeSlideShow({ width: 300, height: 343 });
});

Answer 2

假设插件使用多个元素：

  $('#slideshow', '#slideshow1').fadeSlideShow({
    width: 300,
    height: 343
  });

如果插件被编码为最佳实践，则上述应该有效。循环遍历一组选择器字符串也可以以相同的方式工作。

  var slideshows = ['#slideshow', '#slideshow1', '#slideshow2'];
  $.each(slideshows, function(el, i) {
    $(el).fadeSlideShow({
      width: 300,
      height: 343
    });
  });

否则，如果div是按逻辑顺序排列的，则可以通过编程方式构造选择器。

  var slideshowStart = 1;
  var slideshowEnd = 50;
  for(var i = slideshowStart; i <= slideshowEnd; i++) {
    $('#slideshow'+i).fadeSlideShow({
      width: 300,
      height: 343
    });
  }

或者，一个好的轻量级图像幻灯片插件是jQuery.cycle。它经过了充分测试，具有极高的可扩展性。

http://jquery.malsup.com/cycle/

Answer 3

由于#slideshow只表示DOM元素ID，例如单个div或其他内容，因此您无法将其更改为#slideshow2并创建ID为{{div的其他slideshow2 1}？如果这不起作用，那么幻灯片代码可能是以不可能的方式编写的？

javascript，jQuery同时运行带有两个不同输入的单个函数

3 个答案: