Question

我有一个Cycle2幻灯片。我希望它每5秒循环一次幻灯片，但我也希望用户能够单击向上或向下键来推进幻灯片。单击向上或向下键时，我想确保幻灯片显示在前进到下一个或上一个之前不忙。问题是，当我检查.cycle-busy时，每次都返回false。我将幻灯片设置为暂停并尝试检查。单击向上或向下键时循环暂停，这也会返回false。我错过了什么吗？

我正在使用jquery 1.8.2。

$(document).keydown(function (e) {
    var busy = $('#mainSlideShow').is('.cycle-busy');
    alert(busy);
    if ($('.cycle-slideshow').is(':animated'))
        return false;

    switch (e.which) {
        case 38:
            $('.cycle-slideshow').cycle('next');
            break;

        case 40:
            $('.cycle-slideshow').cycle('prev');
            break;
    }
});

<div id="mainSlideShow" >
    <div class="cycle-slideshow"
        data-cycle-timeout="5000"
        data-cycle-slides="> div"
        data-cycle-fx="scrollVert"
        data-cycle-prev=".prev"
        data-cycle-next=".next"
        data-cycle-paused="false">
        <div class="slide" style="background-image: url('Images/SlideShow/building.jpg');">
            <div class="slide-wrapper">
                <div class="next">
                    <img src="Images/prev.png" />
                </div>
                <div class="caption-wrapper">
                    <div class="caption">
                        <h2 class="title">Commercial Products</h2>
                        <div class="description">
                            Specializing in small to mid-size businesses, RAM offers a wide variety of coverages to meet your business needs.
                        </div>
                    </div>
                </div>
                <div class="prev">
                    <img src="Images/next.png" />
                </div>
            </div>
        </div>
        <div class="slide" style="background-image: url('Images/SlideShow/farm.jpg');">
            <div class="slide-wrapper">
                <div class="next">
                    <img src="Images/prev.png" />
                </div>
                <div class="caption-wrapper">
                    <div class="caption">
                        <h2 class="title">Commercial Products</h2>
                        <div class="description">
                            Specializing in small to mid-size businesses, RAM offers a wide variety of coverages to meet your business needs.
                        </div>
                    </div>
                </div>
                <div class="prev">
                    <img src="Images/next.png" />
                </div>
            </div>
        </div>
        <div class="slide" style="background-image: url('Images/SlideShow/family.jpg');">
            <div class="slide-wrapper">
                <div class="next">
                    <img src="Images/prev.png" />
                </div>
                <div class="caption-wrapper">
                    <div class="caption">
                        <h2 class="title">Commercial Products</h2>
                        <div class="description">
                            Specializing in small to mid-size businesses, RAM offers a wide variety of coverages to meet your business needs.
                        </div>
                    </div>
                </div>
                <div class="prev">
                    <img src="Images/next.png" />
                </div>
            </div>
        </div>
        <div class="slide" style="background-image: url('Images/SlideShow/house.jpg');">
            <div class="slide-wrapper">
                <div class="next">
                    <img src="Images/prev.png" />
                </div>
                <div class="caption-wrapper">
                    <div class="caption">
                        <h2 class="title">Commercial Products</h2>
                        <div class="description">
                            Specializing in small to mid-size businesses, RAM offers a wide variety of coverages to meet your business needs.
                        </div>
                    </div>
                </div>
                <div class="prev">
                    <img src="Images/next.png" />
                </div>
            </div>
        </div>
    </div>
</div

Answer 1

busy的值包含在幻灯片显示的选项哈希中，要访问此值，请使用以下方法：

var opts = $('.cycle-slideshow' ).data( 'cycle.opts'); 
if(opts.busy){
    return false;
}

Cycle2 State始终为false

1 个答案: