0

ここに、非常に単純な機能のカルーセルの例を設定しました。

http://codepen.io/anon/full/myvAz

問題は、ホバー時にカルーセルの回転を停止できないことです。

幅と高さが設定されていても、含まれている div にカーソルを合わせてもアラートが発生しません。ただし、ホバーセクションをコンソールに貼り付けると、警告が表示されます。

他のコードと組み合わせると発火しないようです。

どんな助けでも感謝します

ありがとう

コードは次のとおりです。

<script>
// Main image carousel
$(document).ready(function(){
$("#headerMrS > div:gt(0)").hide();

var carouDiv = function(){
    setInterval(function() { 
      $('#headerMrS > div:first')
        .fadeOut(500)
        .next()
        .fadeIn(500)
        .end()
        .appendTo('#headerMrS');
    },  2000);
};

$(carouDiv());//Initialise the carousel function

$("#headerMrS").hover(function(){//Stop the carousel on hover
 $(this).stop;
  },function(){
  $(this).resume;
});


//Direction Arrow links
$(".button-sales").click(function(){
    $(".header").fadeOut(800);
    $(".sales").animate({opacity:"show"},800);
});
$(".button-modern").click(function(){
    $(".header").fadeOut(800);
    $(".modern").animate({opacity:"show"},800);
});
$(".button-antique").click(function(){
    $(".header").fadeOut(800);
    $(".antique").animate({opacity:"show"},800);
});
});


<style>

#headerMrS {position:relative; height:150px; width:350px}
.header {position:absolute; top:0; left:0}
</style>

<div id="headerMrS">
<div class="header sales active">
    <div class="header-content">
        <img src="http://placehold.it/350x150/4787ed/ffffff" alt="" />
        <div class="button-next button-antique">next</div>
        <div class="button-prev button-modern">prev</div>
    </div>
</div>
<div class="header antique">
    <div class="header-content">
        <img src="http://placehold.it/350x150/fc8a41/ffffff" alt="" />

        <div class="button-next button-modern">next</div>
        <div class="button-prev button-sales">prev</div>
    </div>
</div>
<div class="header modern">
    <div class="header-content">
        <img src="http://placehold.it/350x150/e7376b/ffffff" alt="" />

        <div class="button-next button-sales">next</div>
        <div class="button-prev button-antique">prev</div>
    </div>
</div>
4

2 に答える 2

2

を使用するのはclearInterval()どうですか？

単純に を呼び出す代わりにsetInterval()、setInterval()関数を変数に代入します。以下では を使用しますcarouselInt。これは、 を呼び出すために必要ですclearInterval()。間隔を停止するには、次に呼び出しますclearInterval(carouselInt)

私が今読んだことからstop()、現在のアニメーションを停止しますが、2 秒ごとに新しいアニメーションがあります。アニメーションが発生する原因となっている setInterval には明らかな影響はありません。

以下を試すことができます。

var carouselInt = '';

var carouDiv = function(){
    carouselInt = setInterval(function() { 
      $('#headerMrS > div:first')
        .fadeOut(500)
        .next()
        .fadeIn(500)
        .end()
        .appendTo('#headerMrS');
    },  2000);
};

$(carouDiv());//Initialise the carousel function

$("#headerMrS").hover(function(){//Stop the carousel on hover
 clearInterval(carouselInt);
  },function(){
  carouDiv();
});
于 2013-01-08T14:46:50.937 に答える
0

HTML の 63 行目付近にスクリプト タグが閉じられていないようですが、それが問題なのでしょうか?

于 2013-01-08T14:36:10.817 に答える