1

jQuery-cycle を使用してスライドショーの 1 つを動かしていますが、コンテナ div に適用された border-radius プロパティが期待どおりに機能しません。「View Content」スライドの角が丸くなっていますが、他のスライドには角がありません。

#carousel  {-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;}

私のサイクル初期化コード:

$('#carousel').cycle( {
        speed: 400,
        startingSlide: 1,
        speedIn:null,
        speedOut:null,
        cleartype: false,
        fit:1,
        width:980,
        delay: 0,
        timeout:0,  
        fx: 'scrollHorz',
        easing: 'swing',
        easeIn:null,
        easeOut:null,
        prev: '#left',
        next: '#right',
        pager: '#pager',
        pagerAnchorBuilder: function ( idx, slide ) {           
        return('<span><b>0'+slide.id+'</b> / 07</span>');       
        },
        updateActivePagerLink: function(pager, activeIndex) { 
                if(activeIndex==0){
                $('#navigation').hide();
                $('#bottombar').css({'margin-top':'22px'});
                }

                else if(activeIndex==1){
                $('#left').hide(); $('#right').show();
                $('#bottombar').css({'margin-top':'540px'});
                }

                else if(activeIndex==7){
                $('#left').show(); $('#right').hide();
                $('#bottombar').css({'margin-top':'540px'});
                }
                else
                {
                    $('#right').show();$('#left').show();
                    $('#bottombar').css({'margin-top':'540px'});
                }               $('#pager').find('span:eq('+activeIndex+')').addClass('activeSpan').siblings().removeClass('activeSpan'); 
                            }


});

デモ: http://rjwcollective.com/equinox/brochure/

4

1 に答える 1

1

#carousel div で実際に角が丸くなっています (#carousel に赤い境界線を追加することでこれをテストできます)。表示されない理由は、画像が完全に配置されており、角が丸くなっていないためです。

角を丸くしたい場合は、スタイルシートに次のルールを追加します。

.carousel_cont {
  padding: 15px 0px;
}
于 2011-06-06T22:05:42.403 に答える