0

嘿伙计们,我只是在做一些乱七八糟的事情,学习一些新东西来消磨时间,我现在正在摆弄 javascript,我遇到了一个问题。

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

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

有没有一种方法可以让我说更改#slideshow#slideshow1,然后让它同时在同一段代码上运行#slideshow?显然,我可以更改一些名称并拥有大量文字,但我更喜欢找到一种更整洁的方式。

我是新手,所以非常感谢任何建议

4

3 回答 3

2
$(document).ready(function()
{
     $('#slideshow').fadeSlideShow({ width: 300, height: 343 });
     $('#slideshow1').fadeSlideShow({ width: 300, height: 343 });
});
于 2013-02-15T04:56:37.903 回答
1

假设插件使用多个元素:

  $('#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/

于 2013-02-15T05:03:20.007 回答
0

由于#slideshow只表示一个 DOM 元素 ID,例如单个 div 或其他内容,您能否不将其更改为#slideshow2并创建div一个 ID 为的附加元素slideshow2?如果这不起作用,那么幻灯片代码的编写方式可能是不可能的?

于 2013-02-15T04:55:06.110 回答