我有一个
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>
解决方法
您可以使用添加此插件代码来阻止所有点击:
(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.