0

我正在使用 cloudzoom (CZ) 脚本在 WP 网站上为我的图像添加漂亮的效果。所以我们有多个缩略图和一个更大的图像，上面有缩放效果。点击拇指，替换大图。见这里： http: //www.starplugins.com/cloudzoom 但由于 CZ 没有幻灯片，我决定为这个功能添加我自己的脚本。我所做的只是创建一些可以完成工作的功能，然后在最后触发点击，因此也应用了 cloudzoom 效果。这意味着下一个、上一个、播放 - 都基于点击触发器。到目前为止一切顺利，但问题是如果单击缩略图，我想停止幻灯片放映，但我无法在单击时添加停止事件，因为在这种情况下，上一个和下一个也会在一张幻灯片移动后触发它。我怎么能绕过这个？

请注意，我是 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);
    });
});

编辑这是 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>

有什么想法吗？

4

3 回答 3

0

最近的一篇文章让我写了这个答案。它可能已过时，但可能有效。

这里的 .divClicked 是什么？

这里是：

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

喜欢：（从链接复制）

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

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

$(el).unbind('click.divClick');
于 2013-02-14T07:22:16.893 回答
0

那么你可以使用两种不同的绑定。您可以绑定click用户单击和dbclicksetInterval 内的双击。双击将

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

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

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

这样它就会停止动画。

编辑：

我正在寻找，我发现的另一个可能的解决方案是寻找 event.originalEvent 的存在

$("#vb-thumbs a").click(function(e){
if(e.hasOwnProperty('originalEvent'))
    // User Mouse Click
else
    // Triggered through jQuery/javascript
});
于 2013-02-14T08:15:19.003 回答
0

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

小提琴

我在此使用了参数触发。

$('#foo').trigger('custom', ['Custom', 'Event']);
于 2013-02-14T14:02:42.847 回答