Цикл JQuery - исчезновение / исчезновение прервано

Question

У меня есть слайд-шоу JQuery, в котором текст / слайд исчезает и исчезает.

В то же время у меня есть навигация / места для нажатия.Когда вы нажимаете на область, слайд / текст изменяется.

Проблема в том, что когда текст / слайд замирает и пользователь нажимает на область, замирание прерывается.И если пользователь быстро нажимает на все точки, появляется текст с разных слайдов, который показывается одновременно.

Я хочу, чтобы замирание закончилось, а затем пользователи могли щелкнуть.Вкратце: при исчезновении нет щелчка.

Я сделал небольшой пример, который показывает проблему.

Заголовок html:

<style type="text/css">
     .slideshow
     {
         width:600px;
         height:30px;
         background-color:#0FF;                      
         overflow:hidden;
         margin:50px;
     }
     .slideshow_text_font
     {
         font:Verdana, Geneva, sans-serif;
         font-size:22px;
         font-weight:bold;       
     }
  </style>

  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.cycle.all.latest.js"></script>

  <script type="text/javascript"> 
     $(document).ready(function() {
         $('.slideshow').cycle({                        
            fx: 'custom',
             sync: 0,
             cssBefore: {
                 opacity:0,
                 display: 'block'
             },
             animIn:  {
                 opacity:1               
             },
             animOut: {
                 opacity:0
             },
             timeout:5000,
             speed:2000
         });
     });

     if (document.images) {
         function setSlide(index) { 
           $('.slideshow').cycle(index);
         } 
     }
   </script>

Тело-часть HTML:

<div class="slideshow">
    <div><a class="slideshow_text_font">1. Some text for slide number one</a></div>
    <div><a class="slideshow_text_font">2. Lorem Ipsum is simply dummy text of the</a></div>
    <div><a class="slideshow_text_font">3. Contrary to popular belief, Lorem Ipsum</a></div>
    <div><a class="slideshow_text_font">4. The standard chunk of Lorem Ipsum used</a></div>
    <div><a class="slideshow_text_font">5. It is a long established fact that a</a></div>
    <div><a class="slideshow_text_font">6. There are many variations of passages</a></div>    
  </div>

  <div>
    <a class="slideshow_text_font" onclick="setSlide(0)">Show slide 01</a><br />
    <a class="slideshow_text_font" onclick="setSlide(1)">Show slide 02</a><br />
    <a class="slideshow_text_font" onclick="setSlide(2)">Show slide 03</a><br />
    <a class="slideshow_text_font" onclick="setSlide(3)">Show slide 04</a><br />
    <a class="slideshow_text_font" onclick="setSlide(4)">Show slide 05</a><br />
    <a class="slideshow_text_font" onclick="setSlide(5)">Show slide 06</a>
  </div>

Answer 1

Вы можете использовать добавить этот код плагина, чтобы заблокировать все клики:

(function($) {
    var blocker = $("<div/>", {
            id: "clickBlocker",
            style: 'position:absolute; top:0; left:0; width:100%; height:100%; z-index:100000; display:none; background:url(#);'
        }).click(function(e) {
            e.stopPropagation();
        });

    $.fn.blockClicks = $.blockClicks = function() {
        if(arguments[0]===false) {
            blocker.hide();
        } else {
            blocker.show();
        }
        return (typeof this=="function") ? undefined : this;
    }

    $(function() {
        $("body").append(blocker);
    });
})(jQuery);

Чтобы начать блокировать все клики, используйте .blockClicks() во время цепочки или просто используйте $.blockClicks(); Чтобы прекратить блокировать клики, просто отправьте false:

$.blockClicks(false);

См. этот jsfiddle для демонстрации.

Answer 2

Попробуйте установить prevNextEvent в null.