Question

我有一个名为＆＃39; pie＆＃39;它在5个不同的图像之间不断旋转。我想要做的就是当一个元素被悬停时，阻止它自动切换图像（停止运行饼图功能）。

我认为通过将值设置为true / false会将其停止，但它仍然会继续旋转图像。

有什么想法吗？

var start = true;
pie(start);

$('.pie-state').hover(function() {
    $(this).addClass('active');
    start = false;
    pie(start);
});

function pie(start) {
    if (start) {
        $('.pie').hide().eq(0).show();

        var pause = 1500;
        var motion = 0;
        var pie = $('.pie');
        var piecta = $('.pie-state');
        var count = pie.length;
        var i = 0;
        var c = 1;

        setTimeout(transition, pause);

        function transition() {
            pie.eq(i).animate({
                opacity: 'toggle'
            }, motion);
            piecta.removeClass('active');
            piecta.eq(c).addClass('active');

            if (++i >= count) {
                i = 0;
            }

            if (++c >= count) {
                c = 0;
            }

            pie.eq(i).animate({
                opacity: 'toggle'
            }, motion);

            setTimeout(transition, pause);
        }
    }
}

修改：

请参阅以下JSFIDDLE

正如您所看到的，右侧有5个元素决定了饼图的哪个部分显示（再次使用5个不同的图像）。

旋转工作正常，但我现在需要做的是，当你将鼠标悬停在说“电力”时，自动旋转需要停止，这需要成为活动状态。如果右侧没有任何标签悬停在自动旋转上，则需要继续。

Answer 1

我认为你的功能太多过于复杂。

您希望在一个时间间隔内将CSS类active从一个元素切换到下一个元素。

此外，该函数应检查鼠标指针是否悬停在容器上，在这种情况下不执行任何操作。

您不需要比以下功能更复杂的功能：

setInterval(function () {
    if ($("#graph-wrapper").is(":hover")) return;
    $(".pie-state.active").removeClass("active").next(".pie-state").addClass("active");
    if (!$(".pie-state").is(".active")) $(".pie-state").first().addClass("active");
}, 1500);

这实际上很简单，几乎就像普通英语一样。

展开下面的代码段，看它是否有效：

＆＃13;

setInterval(function () {
    if ($("#graph-wrapper").is(":hover")) return;
    $(".pie-state.active").removeClass("active").next(".pie-state").addClass("active");
    if (!$(".pie-state").is(".active")) $(".pie-state").first().addClass("active");
}, 1500);

＆＃13;

.col-md-6, .col-md-5 {
  width: 400px;
  float: left;
}
#carbon-wrapper {
  position: relative;
  margin-top: 60px;
  width: 694px;
  height: 453px;
  display: block;
}
.pie span {
  width: 333px;
  height: 335px;
  display: block;
  position: absolute;
  margin: 60px 0;
}
.pie-state span {
  width: 312px;
  height: 50px;
  display: block;
  position: relative;
  margin: 30px 0;
}

#graph-electricity {
  background-image: url(http://alltech.m360.co.uk/wp-content/themes/alltech/assets/img/pie-1.png);
}
#graph-agriculture {
  background-image: url(http://alltech.m360.co.uk/wp-content/themes/alltech/assets/img/pie-2.png);
}
#graph-residential {
  background-image: url(http://alltech.m360.co.uk/wp-content/themes/alltech/assets/img/pie-3.png);
}
#graph-industry {
  background-image: url(http://alltech.m360.co.uk/wp-content/themes/alltech/assets/img/pie-4.png);
}
#graph-transportation {
  background-image: url(http://alltech.m360.co.uk/wp-content/themes/alltech/assets/img/pie-5.png);
}
#graph-electricity-cta {
  background-image: url(http://alltech.m360.co.uk/wp-content/themes/alltech/assets/img/pie-default-1.png);
}
#graph-agriculture-cta {
  background-image: url(http://alltech.m360.co.uk/wp-content/themes/alltech/assets/img/pie-default-2.png);
}
#graph-residential-cta {
  background-image: url(http://alltech.m360.co.uk/wp-content/themes/alltech/assets/img/pie-default-3.png);
}
#graph-industry-cta {
  background-image: url(http://alltech.m360.co.uk/wp-content/themes/alltech/assets/img/pie-default-4.png);
}
#graph-transportation-cta {
  background-image: url(http://alltech.m360.co.uk/wp-content/themes/alltech/assets/img/pie-default-5.png);
}
.active #graph-electricity-cta {
  background-image: url(http://alltech.m360.co.uk/wp-content/themes/alltech/assets/img/pie-hover-1.png);
}
.active #graph-agriculture-cta {
  background-image: url(http://alltech.m360.co.uk/wp-content/themes/alltech/assets/img/pie-hover-2.png);
}
.active #graph-residential-cta {
  background-image: url(http://alltech.m360.co.uk/wp-content/themes/alltech/assets/img/pie-hover-3.png);
}
.active #graph-industry-cta {
  background-image: url(http://alltech.m360.co.uk/wp-content/themes/alltech/assets/img/pie-hover-4.png);
}
.active #graph-transportation-cta {
  background-image: url(http://alltech.m360.co.uk/wp-content/themes/alltech/assets/img/pie-hover-5.png);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="graph-wrapper">
  <div class="col-md-6">
    <div class="pie">
      <span id="graph-electricity"></span>
    </div>
    <div class="pie">
      <span id="graph-agriculture"></span>
    </div>
    <div class="pie">
      <span id="graph-residential"></span>
    </div>
    <div class="pie">
      <span id="graph-industry"></span>
    </div>
    <div class="pie">
      <span id="graph-transportation"></span>
    </div>
  </div>
  <div class="col-md-offset-1 col-md-5">
    <div class="pie-state active">
      <span id="graph-electricity-cta"></span>
    </div>
    <div class="pie-state">
      <span id="graph-agriculture-cta"></span>
    </div>
    <div class="pie-state">
      <span id="graph-residential-cta"></span>
    </div>
    <div class="pie-state">
      <span id="graph-industry-cta"></span>
    </div>
    <div class="pie-state">
      <span id="graph-transportation-cta"></span>
    </div>
  </div>
  <div class="clearfix"></div>
</div>

＆＃13;

Answer 2

删除转换方法中的超时。并在pie方法中为setimeout分配全局变量。 timer = setTimeout（转换，暂停）;（计时器应该在文档的顶部进行decalred）

悬停事件 - clearTimeOut（计时器）

鼠标离开事件=再次执行timer = setTimeout（转换，暂停）;

停止一个函数在元素悬停时运行

2 个答案: