JQuery 사이클 - 페이드 인/페이드 아웃이 중단되었습니다.

Question

일부 텍스트/슬라이드가 페이드 인 및 페이드 아웃되는 JQuery 슬라이드 쇼가 있습니다.

동시에 내비게이션/스팟을 클릭합니다. 스폿을 클릭하면 슬라이드/텍스트가 변경됩니다.

문제는 텍스트/슬라이드가 희미 해지고 사용자가 지점을 클릭하면 페이드가 중단된다는 것입니다. 사용자가 모든 스폿을 빠르게 클릭하면 다른 슬라이드의 텍스트가 동시에 표시됩니다.

페이딩을 끝내고 사용자가 클릭 할 수 있기를 원합니다. 간단히 : 클릭 수가 줄어들지 않습니다.

나는이 문제를 보여주는 약간의 예를 만들었습니다. html로의

헤드 부분 : 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> 

바디 부분 :

<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); 

데모는 this jsfiddle을 참조하십시오.

Answer 2

null에 prevNextEvent을 설정하십시오.