1

ボタンをデフォルトで非表示にしようとしていますが、マウスが上にあるときにのみ表示されます。CSSで表示なしを設定しても、カルーセルコアコードが表示ブロックを追加しているように見える問題がありますが。

var $slides = $("#slides");
$slides.find('ul.banners').eq(0).carouFredSel({
    height: 360,
    items: {
        visible: 1
    },
    scroll: {
        easing: "easeInOutSine",
        duration: 1200
    },
    auto: {
        delay: 1000
    },
    prev: {
        button: $slides.find('.prev'),
        items: 1
    },              
    next:{
        button: $slides.find('.next'),
        items: 1
    },
    pagination: {
        container: $slides.find(".pagination"),
        keys: true,
        anchorBuilder: function(nr) { 
            return '<li><a href="#"><span>'+nr+'</span></a></li>'; 
        }
    }
});
$slideButtons = $slides.find(".next,.prev");
$slides.find('ul.banners').hover(function(){
    $slideButtons.fadeIn();
},function(){
    $slideButtons.fadeOut();
});

HTML

<div id="slides">
    <ul class="banners">
        <li><img /></li>
        <li><img /></li>
    </ul>

    <ul class="pagination"></ul>

    <div class="next">Next</div>
    <div class="prev">Previous</div>
</div>
4

6 に答える 6

7

CSSでこの方法を試してください

 .next{
    display:none !important;
  }

  .prev{
     display:none !important;
  }
于 2012-11-03T05:44:43.553 に答える
4

最新のスタイル属性 (つまり、html の一番下) が、可視性を何も設定していないものであることを確認してください。タグに追加されたスタイル オプションは、私が信じている最も重要なものです。タグに次を追加してみてください。

<tag style="visible:0;" ></tag>

これが機能する場合は、これが問題であることがわかります。たとえば、JavaScript が後でマウスオーバー時にスタイルを変更する可能性があるため、これは解決策として機能する可能性があります。

すべてのインクルードがヘッダーにある場合は、CSS スタイルシート (可視性を何も設定していないもの) を他のスタイルシートの後に移動すると役立つかもしれませんが、JavaScript がページの下部に含まれている場合は、JavaScript を編集する必要があるかもしれません。または移動します。

于 2012-11-01T04:41:59.027 に答える
3

このプラグインは、ロールオーバー効果にスプライトを使用しています。簡単な修正は、ボタンをフォトショップして不透明度を下げることだと思います。

于 2012-10-31T16:59:07.723 に答える
1

次のコードを試してください。

$("#layout-main").hover(
    function(){
        $(".prev").fadeIn(500);
        $(".next").fadeIn(500);
        $(".pagination a").fadeIn(500);
    }, function(){
        $(".prev").fadeOut(500);
        $(".next").fadeOut(500);
        $(".pagination a").fadeOut(500);
    }
);
于 2013-09-11T15:36:53.693 に答える
1

構成をオーバーライドしてみることができます。display: none,私はあなたのコードに追加しました。私はそれをテストしていません。

$slides.find('ul.banners').eq(0).carouFredSel({
    height: 360,
    items: {
        visible: 1
    },
    scroll: {
        easing: "easeInOutSine",
        duration: 1200
    },
    auto: {
        delay: 1000
    },
    prev: {
        display: none,
        button: $slides.find('.prev'),
        items: 1
    },              
    next:{
        display: none,
        button: $slides.find('.next'),
        items: 1
    },
    pagination: {
        container: $slides.find(".pagination"),
        keys: true,
        anchorBuilder: function(nr) { 
            return '<li><a href="#"><span>'+nr+'</span></a></li>'; 
        }
    }
});

プラグインの後に CSS スタイルシートが含まれていますか? プラグインが実行された後、CSS および/または jquery/javascript を介してオーバーライドを試みることができます。

于 2012-11-05T08:20:45.490 に答える
0

この単純なコードを css ファイルで使用します。

.carousel .carousel-control {可視性: 非表示; } .carousel:hover .carousel-control { 可視性: 可視; }

于 2014-12-08T04:29:31.600 に答える