2

アイデアは静止画像ですが、ちょっと待ってください... これは静止画像ではなく、動いていないスライド ショーなので、静止画像だと思います。しかし、その上にマウスを置くと、動き始めます! 私はそれをウェブ上のいくつかの場所で見たことがあり、その効果は非常に気に入っていますが、ブートストラップでそれを模倣することはできません.

私の検索はすべて、ホバー時に一時停止しようとしている人々の結果を返します (誰もドキュメントを言うことができますか...) が、反対のことをすることについては何もしません。とにかく、ここに基本的なコードがあります...

HTML ~ 非常に簡素化されたスライドショー

<div class="carousel slide" data-ride="carousel">
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="images/image1.jpg" alt="Image one">
        </div>
        <div class="item ">
            <img src="images/image2.jpg" alt="Image two">
        </div>
    </div>
</div>

そして、ここにJSがあります

$('.carousel').carousel({
        interval: false, //disable auto scrolling
        pause: false     //prevent pause on hover... we want the opposite
    });

//now I try to change the interval on hover
$('.carousel').hover(function(){
    $(this).carousel({
        interval:1000
    })
});
4

1 に答える 1

1

この循環と一時停止が依存するものは 2 つあります。

もともと マウスが入ったとき (mouseenter - スライドを一時停止) マウスが離れたとき (mouseleave - スライドを再開)

js/bootstrap.js ファイルの次のコード行を変更して、継続的なスライドを許可します。

.on('mouseenter', $.proxy(this.pause , this))に

.on('mouseenter', $.proxy(this.cycle , this))

と

.on('mouseleave', $.proxy(this.cycle , this))に

.on('mouseleave', $.proxy(this.pause , this))

于 2017-09-11T05:58:49.947 に答える