0

私はこのサイトからスライダーについてラウンドを使用しました。

スライドにマウスを合わせると、自動回転が停止します。リンクする必要がありstopます。auto play on clickStop auto play

私のhtmlコード:

<div id="carousel">
    <a href="#"><img src="image_main1.jpg" alt=""></a>
    <a href="#" ><img src="image_main2.jpg" alt=""></a>
    <a href="#" ><img src="image_main3.jpg" alt=""></a>
</div>

<div id="carousel-controls">
    <span class="control current"><img src="video_thumb1.jpg" alt=""></span>
    <span class="control"><img src="video_thumb.jpg2" alt=""></span>
    <span class="control"><img src="video_thumb.jpg3" alt=""></span>
</div>
<div><a href="#">Stop auto play</a></div>

私のスクリプト:

(function($) {

var $descriptions = $('#carousel-descriptions').children('li'),
    $controls = $('#carousel-controls').find('span'),
    $carousel = $('#carousel')
        .roundabout({childSelector:"a", minOpacity:1, autoplay:true, autoplayDuration:5000, autoplayPauseOnHover:true })
        .on('focus', 'a', function() {
            var slideNum = $carousel.roundabout("getChildInFocus");

            $descriptions.add($controls).removeClass('current');
            $($descriptions.get(slideNum)).addClass('current');
            $($controls.get(slideNum)).addClass('current');

        });


$controls.on('click dblclick', function() {
    var slideNum = -1,
        i = 0, len = $controls.length;

    for (; i<len; i++) {
        if (this === $controls.get(i)) {
            slideNum = i;
            break;
        }
    }

    if (slideNum >= 0) {
        $controls.removeClass('current');
        $(this).addClass('current');
        $carousel.roundabout('animateToChild', slideNum);
    }
});

}(jQuery));

どうやってするか?

4

2 に答える 2

1

APIページ(http://fredhq.com/projects/roundabout#/api)から、btnStopAutoplayは「クリックするとRoundaboutの自動再生機能を停止するページ要素のjQueryセレクターです(現在再生中の場合)」。

したがって、最初にIDを追加して、選択できるようにします

<div><a href="#" id="carouselstop">Stop auto play</a></div>

次に、JavaScriptを更新してbtnStopAutoplayを含めます。

.roundabout({childSelector:"a", minOpacity:1, autoplay:true, autoplayDuration:5000, autoplayPauseOnHover:true, btnStopAutoplay:"#carouselstop" })
于 2012-11-29T11:40:21.417 に答える
0

ブール値をfalseに設定すると、自動再生を停止できます

<div><a href="#" onclick='$('#carousel').roundabout({autoplay: false});'>Stop auto play</a></div>

このリンクを参照してください

于 2012-11-29T11:32:07.327 に答える