Question

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

我在查找与此jquery插件一起使用的javascript时遇到了麻烦。我正在尝试将其与更多js插件合并，即我拥有的手风琴插件。最终目标是在一个屏幕上基本上有两个Supersized实例，它们具有相同的控件，不同的图像。我知道，很难想象，但这是一个例子。

正文是全屏幕背景，超大，图像是image1.jpg，它是黑白的。然后，我有一个较小的div，身体中央宽960px，带有我想要的所有图像的手风琴，但颜色。因此，当您更改手风琴时，您可以更改背景。因此，当您在手风琴盒中使用color1.jpg时，身体的背景是image1.jpg黑色和白色。

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

我确定我现在很困惑，所以如果你有任何问题，请不要问。感谢。

Answer 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

希望它有所帮助。

超大全屏滑块API

1 个答案: