Question

我正在使用jquery Cycle 1在我的网站上播放幻灯片。我使用#next函数导航到我的幻灯片。点击我幻灯片的最后一张幻灯片时，它会将我重定向到另一个页面（var random_next_url_enfant）。

我想在幻灯片中添加空格键和右箭头键进行导航。当我添加这个Js代码时，它可以工作，但是在最后一张幻灯片上，它再次启动幻灯片，而不是将我重定向到下一页。

$(document.documentElement).keyup(function (e) {
        if (e.keyCode == 39)
        {        
        $('#slider_projets').cycle('next');
        }
        });

这是我使用鼠标点击的完整代码。在最后一张幻灯片上，它将我重定向到另一个页面，它完美地运行。但是我想对空格键和右箭头做同样的事情：

$('#slider_projets').cycle({
            speed:    600, //temps d'animation
            timeout:  0, //fréquence
            fx: 'scrollLeft',
            //compteur//
            pager: "#nav",
            after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
                $('#counter_1').text((options.currSlide + 1) + ' / ' + (options.slideCount));
                slideIndex = options.currSlide;
                nextIndex = slideIndex + 1;
                prevIndex = slideIndex - 1;
                if (slideIndex == options.slideCount - 1) {
                    /*nextIndex = 0;*/
                    var random_next_url_enfant = $("#random_next_url_enfant").val();
                    $('#next').on("click", function(e){
                        e.preventDefault();

                        window.location = random_next_url_enfant;
                    });
                }

                if (slideIndex === 0) {
                    prevIndex = options.slideCount - 1;
                }

            }

        });

我想我错过了什么，但我找不到什么！

这是一个jsfiddle：

http://jsfiddle.net/8HsdG/

非常感谢你的帮助，

Answer 1

您需要访问滑块外的滑块选项，因为没有听众会告诉它去那里，只有点击事件。

这是一个非常接近你的jsfiddle，它拥有你需要的一切，你只需填写空白。

http://jsfiddle.net/kkemple/8HsdG/1/

我将代码包装在一个匿名函数中，因此我可以声明一些范围变量

(function () {
  var slideIndex, slideCount;

  // all of your code is here
})();

然后我在你的滑块上添加了一个前调用：

before: function(currSlideElement, nextSlideElement, options, forwardFlag) {
     slideCount = options.slideCount;
},

然后将以下代码添加到您的关键事件中：

if ( slideIndex == slideCount ) {
  //redirect to random url
   e.preventDefault;
}

Answer 2

@kkemple，我已经解决了问题......我只需要改变：

$(document.documentElement).keyup(function (e) {
        if (e.keyCode == 32)

        {        
       $('#slider_projets').cycle('next');
        }
        });

通过

$(document.documentElement).keyup(function (e) {
        if (e.keyCode == 32)

        {        
       $("#next").trigger("click");
        }
        });

它完美无缺！无论如何，谢谢你的帮助！

jquery循环幻灯片，带键码导航

2 个答案: