慢速旋转/替换文本

Question

我正在尝试创建一个像这样的旋转文本效果： http : //www.massstudies.com/ 。 但是，我希望当用户将鼠标悬停在文本上方时，旋转速度会降低。 我目前有它停止，我正在使用clearInterval。

任何建议深表感谢。 谢谢：）

HTML：

<div id="main">

   <p id="text"></p>

   <button onclick="pauseRotation();">Stop</button>

</div>

脚本：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
var words = ['Chocolate', 'Sugar','Cocoa Powder', 'Salt'];
    var index = 0;

    var nIntervId;

    function rotate() {
        document.getElementById('text').innerHTML =words[(index++)%(words.length)];
    }

    nIntervId=setInterval(rotate, 100);

    function pauseRotation(){
      clearInterval(nIntervId);
    }
</script>

Answer 1

这是一种方法，可以在此小提琴中对其进行测试： http : //jsfiddle.net/6ybyM/2/

var words = ['Chocolate', 'Sugar',"Cocoa Powder", 'Salt'];
var index = 0;

(function rotate() {
  document.getElementById('text').innerHTML =words[(index++)%(words.length)];
  if($("#text").is(":hover")){
    setTimeout(rotate, 300);
  }
  else{
    setTimeout(rotate, 100);
  }
})()