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 ファイルの方が適していると思います。スタイル シート ファイルではそれは望ましくありません)。

そしてあなたの.cssで：

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