超大型全屏滑块API

问题描述：

http://buildinternet.com/project/supersized/超大型全屏滑块API

我很难找出与此jquery插件一起使用的javascript。我想要做的就是将它与更多的js插件合并，即我的手风琴插件。最终目标是在同一个屏幕上使用相同的控件和不同的图像，实际上有两个Supersized运行实例。我知道，很难想象，但这是一个例子。

身体是全屏幕背景与超大，图像是image1.jpg，它是黑色和白色。然后，我有一个更小的div，身体*宽960px，带有我想要的所有图像的手风琴，但彩色。所以当你改变手风琴，你改变背景。所以当你在手风琴盒中有彩色的image1.jpg时，身体的背景是image1.jpg黑白。

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

我确定我现在很困惑，所以如果你有任何问题，就去问问。谢谢。

答

让我们看看，如果我在点击一个div或东西有你的问题的权利，

如果你正在寻找一种方式来更改背景图片（使用超大型），然后有很多方法可以做到它。

下面的代码可能会帮助你，它会在最后用'-bw'代替活动的幻灯片图像名称。

例如：点击与类名一个div“点击我”从“image.jpg的”背景图像更改为“图像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

相关推荐