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

jquery cycle slideshow, with keycode navigation

本文关键字：代码 导航 循环 幻灯片 jquery      更新时间：2023-11-15

我正在使用jquery Cycle 1在我的网站上使用幻灯片。我使用#next功能导航到我的幻灯片。当点击我幻灯片的最后一张幻灯片时，它会将我重定向到另一个页面（var randomnext_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/

非常感谢您的帮助，

您需要访问滑块之外的滑块选项，您无法访问url的原因是没有监听器告诉它去那里，只有点击事件。

这里有一个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;
}

@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");
        }
        });

而且效果非常好！不管怎样，谢谢你的帮助！

相关文章：