任何滑块。如何在最后一张幻灯片上向右滑动以转到 URL？答案

【问题标题】：AnythingSlider. How to Swipe right on Last Slide to go to URL?任何滑块。如何在最后一张幻灯片上向右滑动以转到 URL？
【发布时间】：2014-02-28 18:14:49
【问题描述】：

如何在最后一张幻灯片上“向右滑动”以转到 URL？（就像在幻灯片 6 上单击“下一步”时一样）

http://nonoisenow.com/slideshow/

JS 代码： http://nonoisenow.com/jscode/swiperight.js

有什么建议吗？谢谢！

【问题讨论】：

标签： jquery mobile anythingslider

【解决方案1】：

如果我正确阅读了文档，您可以在jquery.anythingslider.js 文件中将“swipeleft”和“swiperight”添加到激活 clickForwardArrow 和 clickBackwardArrow 的事件列表中

这是用于交互的原始文件部分：

// Interactivity
    clickForwardArrow   : "click",         // Event used to activate forward arrow functionality (e.g. add jQuery mobile's "swiperight")
    clickBackArrow      : "click",         // Event used to activate back arrow functionality (e.g. add jQuery mobile's "swipeleft")
    clickControls       : "click focusin", // Events used to activate navigation control functionality
    clickSlideshow      : "click",         // Event used to activate slideshow play/stop button
    allowRapidChange    : false,           // If true, allow rapid changing of the active pane, instead of ignoring activity during animation

这是添加事件后的样子（我认为）：

// Interactivity
    clickForwardArrow   : "click swiperight",         // Event used to activate forward arrow functionality (e.g. add jQuery mobile's "swiperight")
    clickBackArrow      : "click swipeleft",         // Event used to activate back arrow functionality (e.g. add jQuery mobile's "swipeleft")
    clickControls       : "click focusin", // Events used to activate navigation control functionality
    clickSlideshow      : "click",         // Event used to activate slideshow play/stop button
    allowRapidChange    : false,           // If true, allow rapid changing of the active pane, instead of ignoring activity during animation

【讨论】：

我已经尝试过这样做，但无法让它工作......我将把我的代码粘贴到线程上
我注意到该代码的注释中显示 'jQuery mobile' ，也许它也需要一个 jquery mobile js 文件才能在您的页面中引用？
但您也将其添加到 swiperight.js 而不是 jquery.anythingslider.js ？还是我错过了什么
我尝试了 jquery mobile，就像它在 cmets 中建议的那样。它没有用。它还引起了其他问题。我想我现在想出一个解决方法……只是添加了另一张幻灯片，然后在该幻灯片中添加了一个事件以转到一个页面。 nonoisenow.com/slideshow
如果您点击浏览器上的后退按钮，看起来并不好。这将是我要解决的下一个挑战。大声笑

【解决方案2】：

修改滑动代码以检查滑动是否发生在最后一页，如果是，则转到所需的URL（demo）

if (newx < x) {
    if (slider.currentPage < slider.pages) {
        slider.goForward(); 
    } else if (slider.currentPage === slider.pages) {
        // swipe while on the last page will go to google
        // doesn't work in this demo because of iframes
        window.location.href = 'http://google.com';
    }
}

这里是完整的代码：

/******************************************
  Swipe Demo - without using jQuery Mobile
 ******************************************/

$('#slider').anythingSlider({

    // Callback when the plugin finished initializing
    onInitialized: function(e, slider) {

        var time = 1000, // allow movement if < 1000 ms (1 sec)
            range = 50,  // swipe movement of 50 pixels triggers the slider
            x = 0, t = 0, touch = "ontouchend" in document,
            st = (touch) ? 'touchstart' : 'mousedown',
            mv = (touch) ? 'touchmove' : 'mousemove',
            en = (touch) ? 'touchend' : 'mouseup';

        $('<div class="swipe-overlay"></div>')
            .appendTo(slider.$window)
            .bind(st, function(e){
                // prevent image drag (Firefox)
                e.preventDefault();
                t = (new Date()).getTime();
                x = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX; 
            })
            .bind(en, function(e){
                t = 0; x = 0;
            })
            .bind(mv, function(e){
                e.preventDefault();
                var newx = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX,
                r = (x === 0) ? 0 : Math.abs(newx - x),
                // allow if movement < 1 sec
                ct = (new Date()).getTime();
                if (t !== 0 && ct - t < time && r > range) {
                    if (newx < x) {
                        if (slider.currentPage < slider.pages) {
                            slider.goForward(); 
                        } else if (slider.currentPage === slider.pages) {
                            // swipe while on the last page will go to google
                            // doesn't work in this demo because of iframes
                            window.location.href = 'http://google.com';
                        }
                    }
                    if (newx > x) { slider.goBack(); }
                    t = 0; x = 0;
                }
            });

    }

});

【讨论】：