以下のコードの私のクエリは --- document.ready で関数スライダーを使用しました。私のクエリは、「dot1」をクリックすると、document.ready の関数スライダーが関数が再度呼び出されるまで実行を停止することです。これを達成する方法は?誰でも私を助けることができます..... よろしくお願いします。ここに私のコードがあります:
var imgValue;
var value;
var flag;
function ClickEvent() {
$('span[id^="dot"]').click(function (event) {
event.stopPropagation();
var Clickid = $(event.target)[0].id;
$('.image1').css('display', 'none');
$('.innerdiv').css('display', 'none');
switch (Clickid) {
case 'dot1':
{
debugger;
SliderTimer = null;
clearInterval(SliderTimer);
flag = 0;
value = 1;
ImageLoad(value);
//setTimeout(SlideImage(), 150000);
//alert("dot1 Clicked");
break;
}
case 'dot2':
{
//alert("dot2 Clciked");
//setTimeout(SlideImage(), 5000);
value = 2;
ImageLoad(value);
//setTimeout(SlideImage(), 150000);
//alert("dot2 Clicked");
break;
}
case 'dot3':
{
//alert("dot3 Clicked");
//setTimeout(SlideImage(), 5000);
value = 3;
ImageLoad(value);
//setTimeout(SlideImage(), 150000);
//alert("dot3 Clicked");
break;
}
}
});
}
function ImageLoad(count) {
$('* span').css('background-color', '#ccc');
$('.Dots #dot' + count).delay(4500).css('background-color', "Black");
$('.image #img' + count).show('fade', { direction: 'right' }, 1000);
$('.image #indiv' + count).delay(1500).show('fade', 1000);
$('.image #indiv' + count).delay(2500).hide('fade', { direction: 'left' }, 1000);
$('.image #img' + count).delay(4500).hide('fade', { direction: 'left' }, 1000);
}
function LoadPage() {
$('.image #img1').show('fade', 1000);
$('* span').css('background-color', '#ccc');
$('.Dots #dot1').css('background-color', 'Black');
}
$(document).ready(function Slider() {
var sc = $('.image img').size();
LoadPage();
value = 1;
setInterval(SliderTimer, 5000);
ClickEvent();
});
var SliderTimer = function SliderImage() {
var sc = $('.image img').size();
ImageLoad(value);
if (value == sc) {
value = 1;
}
else {
value += 1;
}
}
</script>