Question

嗨，我是一个相对较新的使用jquery卷轴。当你将鼠标悬停在jquery卷轴http://test.vostrel.cz/jquery.reel/docs/jquery.reel.html上时，我想了解如何停止和播放。我看到有一个停止，开始和暂停事件，但我不确定如何在悬停时激活它。

谢谢！

<img id="image360" src='1.jpg' width="610" height="480" />

<script>
$(function(){ 

//pause on hover (This does not work although hover is registered)
        $('#image360').hover(function() {

        ('#image360').pause();
},

function() {
        ('#image360').play();
});

//360 settings

        $('#image360').reel({
        indicator:   5,
        cw:          true,
        frame:       36,
        speed:       -0.3,
        velocity:    2,
        brake:       .2,
        images:      'cmopen/#.jpg' 
        });

        });
</script>

Answer 1

我遇到了完全相同的问题并用两个JS函数解决了它：

function reel_pause() {
    $('#your_reel_id').trigger("stop"); //stoppe le défilement automatique.
}
function reel_play() {
    if ($('#your_reel_id').data("backwards")) { //teste le sens de défilement.
        $('#your_reel_id').trigger('play'); //relance le défilement à la même frame où on l'a arrêté. Attention, il relance dans son sens naturel (droite à gauche).
        $('#your_reel_id').data("backwards", true) //inverse le sens de défilement
    } else {
        $('#your_reel_id').trigger('play'); //si le sens où l'on a arrêté le défilement est le sens naturel, on n'a pas besoin d'inverser comme au dessus.
    }
}

这一点非常重要，如果你不想让你的卷轴循环： 如果您不会说法语，“if”语句用于检查卷轴播放时的方向。

$('#your_reel_id').data("backwards")
$('#your_reel_id').data("backwards", true)

第一个返回true或false。假＆GT;从右到左打球。第二个改变了自然方向 - ＆gt;左到右。我这样做是因为当你演奏卷轴时，它会在自然方向上播放。即使你在另一个方向播放时也停止了它。

html看起来像这样：

<div id="container" onmouseover="reel_pause()" onmouseout="reel_play()">
    <img src="../Images/image.jpg" id="your_reel_id" width="900" height="500" />
</div>

我把它包裹在div中因为我使用卷轴内的链接。如果您悬停链接，就好像您将鼠标移开并再次开始播放一样。希望它有所帮助！

我不是JS专家，所以如果有人有更好的方法，请发布！

Answer 2

你必须使用方法：pause（），play（）。

$(<your_element>).hover(function() {
    <your_reel>.pause();
},function() {
    <your_reel>.play();
});

在悬停jquery卷轴上停止/播放

2 个答案: