2
私は与えられたulのliを回転させるスクリプトを実行しています。私は李の1つがぶら下げられたときに私が持っている再帰を破ることが可能かどうかを知りたい。理想的には、再帰を続行するかどうかをブール値にすることは理想的です。これは、将来私がビデオを埋め込むときにこれを中断させたいからです。私はちょうどそれを開始したので、これは基本的に私が持っているものです。Javascript/jQuery別の関数を使用して関数を中断することは可能ですか?
HTML:
<script type="text/javascript">
$(document).ready(function(){
$("#ulRotator").rotate();
});
</script>
</head>
<body>
<ul id="ulRotator" style="width:500px; height:500px;">
<li style="background-color:red;"></li>
<li style="background-color:blue;"></li>
<li style="background-color:black;"></li>
<li style="background-color:green;"></li>
<li style="background-color:grey;"></li>
</ul>
</body>
Javascriptを:
(function($){
var rotator;
var rotatorLi;
$.fn.rotate = function() {
rotator = this;
rotatorLi = rotator.children('li');
rotatorLi.css('width',rotator.css('width')).css('height',rotator.css('height'));
rotator.addClass('rotator');
$(rotatorLi[0]).addClass('current');
moveSlides('right');
};
moveSlides = function(direction){
var current = $(rotator).find('li.current');
var currentPosition = $(rotatorLi).index(current);
var slideCount = $(rotatorLi).length - 1;
var next;
if (direction == 'right'){
if(currentPosition == slideCount){
next = rotatorLi[0];
}else{
next = rotatorLi[currentPosition+1];
}
}
else if (direction == 'left'){
if(currentPosition == 0){
next = rotatorLi[slideCount];
}else{
next = rotatorLi[currentPosition-1];
}
}
$(current).delay(6000).fadeOut(500,function(){
$(current).removeClass('current');
$(next).addClass('current');
$(next).css('display','block');
moveSlides(direction);
});
};
})(jQuery);
CSS
.rotator li
{
position:absolute;
z-index:0;
display::block !important;
list-style-type:none;
}
li.current
{
z-index:1 !important;
}
はまた、それはJavascriptに来る、私は周りに行くかもしれないときに私は自分自身の巨大な初心者検討することに注意してくださいこれは私がそれを知らずに非常にばかげたやり方で、どんな指針にも感謝します。乾杯。
私の知らないことがあるので、関数が実行されている間に関数が呼び出されても、それを待つ必要はありませんか? 私は、他のものを停止させる関数が終了したらもう一度それを開始することができると仮定していますか?ホバーを使用するとしますか? –
いいえ、待つ必要はありません。はい、関数を使用して再起動することができます。 – Fabian
すばらしい、すばらしい答えをありがとう。 –