4

我有使用硬币滑块的画廊

var $jq = jQuery.noConflict(); 
    $jq(window).load(function() { 
        var imheight = $jq(window).height()-40;
        var imwidth = imheight / 1.5;
        $jq('#placeholder').css({'width':imwidth+'px','height':imheight+'px','margin-left':'-'+imwidth/2+'px','margin-top':'-'+imheight/2+'px'});
        $jq('#vslider').coinslider({ 
          width:imwidth, 
          height:imheight, 
          spw: 6, 
          sph: 4, 
          delay: 2500, 
          sDelay: 30, 
          opacity: 0.7, 
          titleSpeed: 1500, 
          effect: '', 
          navigation: false, 
          links : true, 
          hoverPause: false, 
          stopAtLastSlide: true 
        });
 })

和 HTML：

<div id="placeholder">
  <div id="vslider">
    <a href="/main"><img src="/preload/2.jpg" alt="701" /></a>
    <a href="/main"><img src="/preload/1.jpg" alt="563" /></a>
  </div> 
</div>

占位符 div 以正确的宽度和高度加载。
但是 vslider 不会改变它的大小。
会是什么？

4

1 回答 1

4

我在尝试做同样的事情时遇到了一些麻烦。经过大量挖掘，我找到了如何做到这一点。

假设您有以下硬币滑块面板：

            <div id="banner_slideshow">
                <a href="#1">
                    <img src="header-image-bg1.jpg" alt="" />
                </a>
            </div>

coin-slider 将生成一个名为 的类cs-<container-id>，在本例cs-banner_slideshow中为用于动画绘制的每个“正方形”。

它实际上删除了<img>您放置的内容，并将其替换为背景等效图像。

所以基本上你需要做的就是把它放在你的.js中：

$('#banner_slideshow').coinslider({
    width: 1000, // width of slider panel
    height: 350, // height of slider panel
});

// Resize picture.
$('.cs-banner_slideshow').css('background-size', '1000px 350px');

（您也可以在 .css 文件中执行此操作，但我发现它更适合 javascript 文件，因为它访问 coin-slider 的内部实现，我不希望在我的样式表文件中使用它）。

在你的.css中：

#banner_slideshow {
    background-repeat: no-repeat;
    background-size: 1000px 350px;
}
于 2013-07-18T15:27:14.257 回答