0

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

我无法弄清楚与这个 jquery 插件一起使用的 javascript。我想要做的是将它与更多的 js 插件合并，即我拥有的手风琴插件。最终目标本质上是在一个屏幕上运行两个具有相同控件、不同图像的 Supersized 实例。我知道，很难想象，但这里有一个例子。

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

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

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

4

1 回答 1

1

让我看看你的问题是否正确，

如果您正在寻找一种在单击 div 或其他内容时更改背景图像（由超大尺寸使用）的方法，那么有很多方法可以做到这一点。

以下代码可能会帮助您，它将在其末尾用“-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

希望能帮助到你。

于 2012-04-18T00:09:05.820 回答