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

【问题标题】：Stop/Play on hover jquery reel在悬停 jquery 卷轴上停止/播放
【发布时间】：2012-12-17 10:02:00
【问题描述】：

您好，我对使用 jquery reel 比较陌生。当您将鼠标悬停在 jquery reel 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>

【问题讨论】：

你能显示一些代码吗？你已经尝试了什么？另见：stackoverflow.com/questions/how-to-ask
感谢帮助，已更新代码。

标签： javascript jquery jquery-reel

【解决方案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)

第一个返回真或假。 False-> 从右到左播放。第二个改变自然方向 -> 从左到右。我这样做是因为当您播放卷轴时，它会按自然方向播放。即使你在它以另一种方式播放时停止它。

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 专家，所以如果有人有更好的方法，请发布！

【讨论】：

【解决方案2】：

你必须使用方法：pause()、play()。

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

【讨论】：