用户到达上一张幻灯片时重定向

时间:2014-07-11 19:40:23

标签: javascript jquery html touch

首先,我不是一个程序员。我拼凑了一些用于制作幻灯片的代码,您可以使用滑动手势在移动设备上向前和向后导航。我遇到的问题是,当用户在最后一张幻灯片上滑动时,我需要将用户定向到另一个html页面。我曾尝试在代码中的不同位置放置“window.location =”调用,但我无法在任何地方使用它。这是我的标记和代码。我使用了错误的方法吗?

<div id="slideWrap" class="slides">
<section id="slide1" class="mainSlides">
<h1>Slide 1</h1>
</section>

<section id="slide2">
<h1>Slide 2</h1>
</section>

<section id="slide3">
<h1>Slide 3</h1>
</section>

<section id="slide4">
<h1>Slide 4</h1>
</section>

<section id="slide5">
<h1>Slide 5</h1>
</section>

</div>

var currentSlide = 0;
$(function() {
$('.slides').swipe({
    swipe:function(event, direction, distance, duration, fingerCount) {
        switch(direction) {
            case "left":
            next();
            break;
            case "right":
            back();
            break;
        }
    }
});

initSlides();
});

function initSlides() {
$("#slideWrap").html($('section').sort(function(){
return Math.random()-0.5;
}));

$('section').eq(currentSlide).addClass('active');
}

function next() {
goto(currentSlide+1);
};

function back(){
goto(currentSlide-1);
}

function goto(n){
if(n > -1 && n < $('section').length) currentSlide = n;
else return;
$('section').removeClass('active').eq(currentSlide).addClass('active');
}

任何见解都将受到高度赞赏。感谢。

1 个答案:

答案 0 :(得分:0)

如果要重定向到的页面不是本地页面,则可能需要调用“window.location.href = {full url}”而不是“window.location = {relative path}”

试试这个:

function goto(n){
  if(n > -1 && n < $('section').length) currentSlide = n;
  else if (n == $('section').length) window.location.href = "{url}";
  else return;
  $('section').removeClass('active').eq(currentSlide).addClass('active');
}