Question

我正在使用cloudzoom（CZ）脚本为WP网站上的图像添加一个很好的效果。所以我们有多个缩略图和一个更大的图像，上面有缩放功能。点击拇指，替换大图像。看这里： http://www.starplugins.com/cloudzoom 但由于CZ没有幻灯片，我决定为此功能添加自己的脚本。我所做的只是创建一些完成其工作的功能，而不是在最后触发点击，因此也会应用cloudzoom效果。这意味着接下来，prev，play - 都基于点击触发器。到目前为止一切都那么好，但问题是如果点击缩略图我想停止幻灯片放映，但是我无法在点击上添加停止事件，因为在这种情况下，prev和next也会在一次幻灯片移动后触发它。我怎么能绕过这个？

请注意我是jquery和编码的新手，所以我的脚本可能未经优化:)这是：

jQuery(document).ready(function() {
    /* onclick change the current slide */
    /* this is the problematic part */
    jQuery('#vb-thumbs a').click(function() {
        jQuery('.current').removeClass('current');
        jQuery(this).addClass('current');
        /* next comes the slideshow stop event but commented because next and prev also triggers it */
        /*
        if (jQuery(intervalID).length) {
            clearInterval(intervalID);
        }
        */
    });

    /* we set up the manual button navigation */
    function prevImage(){
        var current = jQuery('.current');
        if(jQuery(current).prev().is('a')) {
            jQuery(current).prev('a').trigger('click').addClass('current');
            jQuery(current).removeClass('current');
        }
        else { //if there is no thumb before, jump to the end of the list
            jQuery('#vb-thumbs a').last().trigger('click').addClass('current');
            jQuery(current).removeClass('current');
        }
    };
    function nextImage(){
        var current = jQuery('.current');
        if(jQuery(current).next().is('a')) {
            jQuery(current).next('a').trigger('click').addClass('current');
            jQuery(current).removeClass('current');
        }
        else { //if there is no thumb after, jump to the beginning of the list
            jQuery('#vb-thumbs a').first().trigger('click').addClass('current');
            jQuery(current).removeClass('current');
        }
    };

    /* the button functions */
    jQuery('a.prev').click(function(){
        prevImage();
        clearInterval(intervalID);
    });
    jQuery('a.next').click(function(){
        nextImage();
        clearInterval(intervalID);
    });

    jQuery('a.start').click(function(){
        intervalID = setInterval(nextImage, 3000);
    });
    jQuery('a.stop').click(function(){
        clearInterval(intervalID);
    });
});

EDIT 这是HTML部分

按钮：

<a class="prev"><img src="/wp-includes/images/icon-prev.jpg" width="10" height="10" alt="Previous" /></a>
<a class="start"><img src="/wp-includes/images/icon-play.jpg" width="10" height="10" alt="Play" /></a>
<a class="stop"><img src="/wp-includes/images/icon-stop.jpg" width="10" height="10" alt="Stop" /></a>
<a class="next"><img src="/wp-includes/images/icon-next.jpg" width="10" height="10" alt="Next" /></a>

缩略图部分如下所示：

<div id="vb-thumbs">
 <a href="hreftobigimageforclouzoom_1" class="cloudzoom-gallery>thumb image 1</a>
 <a href="hreftobigimageforclouzoom_2" class="cloudzoom-gallery>thumb image 2</a>
 and so on
</div>

任何想法？

Answer 1

最近的一篇帖子让我写了这个答案。它可能已经过时但可能有效。

What is .divClicked here?

这是：

您可以使用命名空间绑定多个点击事件：

喜欢:(从链接中复制）

$(el).bind('click', function() { alert('click 1'); };

$(el).bind('click.divClick', function() { alert('click 2'); };

$(el).unbind('click.divClick');

Answer 2

你可以使用两种不同的绑定。您可以绑定click进行用户点击，并dbclick进行双击setInterval。双击

在setInterval时间后播放下一张幻灯片。

在用户点击时，我们会做两件事。

播放下一张幻灯片
清除间隔

这样它就会停止动画。

修改

我正在寻找另一种可能的解决方案，我发现正在寻找event.originalEvent
的存在
$("#vb-thumbs a").click(function(e){ if(e.hasOwnProperty('originalEvent')) // User Mouse Click else // Triggered through jQuery/javascript });

Answer 3

确定。我为你创造了一个小提琴。这就是它可能对你有用的方式。

Fiddle

我已经使用params作为触发器。

$('#foo').trigger('custom', ['Custom', 'Event']);

如何使jquery触发器单击handle 2事件类型

3 个答案: