超大全屏滑块API

Question

http://buildinternet.com/project/supersized/

我很难弄清楚这个jquery插件附带的javascript。我想要做的是将它与更多的js插件合并，也就是我拥有的一个折叠插件。最终目标是在一个屏幕上运行两个Supersized实例，具有相同的控件和不同的图像。我知道，很难想象，但这里有一个例子。

主体是全屏背景与超大，图像是image1.jpg和它的黑白。然后，我有一个较小的div，960px宽的身体中心，手风琴所有我想要的图像，但颜色。所以当你改变手风琴的时候，你也改变了背景。因此，当您在accordion框中使用彩色image1.jpg时，body的背景为image1.jpg黑白。

所以我遇到了麻烦，因为supersized的js似乎只定义了前一个和下一个缩略图，而不是所有的缩略图。所以从理论上讲，我必须弄清楚如何显示所有的缩略图，然后弄清楚如何改变这些缩略图的图像，以便它仍然控制幻灯片切换，而不是实际控制背景的缩略图。这样，我就可以将手风琴幻灯片设置为这些缩略图，但让它们同时控制手风琴和背景。

我肯定我现在很困惑，所以如果你有任何问题，请尽管问。谢谢。

Answer 1

看看我有没有回答对你的问题

如果你正在寻找一种在点击div或其他东西时改变背景图像(由supersized使用)的方法，那么有很多方法可以做到这一点。

下面的代码可能会帮你解决这个问题，它会在幻灯片的末尾用一个'-bw‘替换活动的幻灯片名称。

例如:单击类名为'click-me‘的div会将背景图像从'image.jpg’更改为' image -bw.jpg‘。

function changeBg() {
  var $supersizedImg = $("#supersized .activeslide img"),
      imgSrc = $supersizedImg.attr('src');
  imgSrcArray = imgSrc.split('/'); //split the image source by '/'
  fullFileName = imgSrcArray[imgSrcArray.length - 1]; //get the file name
  fileName = fullFileName.split('.'); //split that file name by '.'
  fileName[0] = fileName[0] + '-bw'; //grab the first array element(which is filename without extension and add a '-bw' in the end)
  fileName = fileName.join('.'); //join the new file name with its extension with a '.'
  imgSrcArray[imgSrcArray.length - 1] = fileName; //add the new file name the the last element of imgSrcArray. 
  imgSrcArray = imgSrcArray.join('/'); //join the whole url by '/'
  $supersizedImg.attr('src', imgSrcArray); //add the new url to the img src of supersized
}

$('.click-me').on('click', changeBg); //call changeBg function when a div is clicked

希望能有所帮助。