0

每次使用iDangerous Swiper jQuery 插件更改页面时，我都想交换图像。

可以通过用手指在视图之间拖动或mySwiper.swipePrev()在代码中使用来更改页面。每次更改时，我都需要更改src显示正在显示哪个页面的图像。只有2种不同的观点。

HTML：

<!-- Source should change based on which page you are on -->
<img class="navbar" src="navbar-firstpage.png" />

<!-- First page -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" data-hash="page1">
            Slide 1
            <p onClick="mySwiper.swipeNext()">Go to next page</p>
        </div>
    </div>
</div>

<!-- second page -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" data-hash="page2">
            Slide 1
            <p onClick="mySwiper.swipePrev()">Go to last page</p>
        </div>
    </div>
</div>

jQuery：

// enable swipe between views
var mySwiper = new Swiper('.swiper-container',{
});

我的第一个想法是在 mySwiper.swipeNext() 中调用另一个函数，但这似乎只在单击文本时调用，而不是在滑动时调用。

有没有一种方法可以让我在页面更改时进行监听，或者我可以使用 hack 来检测元素（即第 1 页或第 2 页上的某些内容）何时使用 jQuery 在视口中显示？

4

1 回答 1

2

我能够做一些黑客攻击来检测页面更改。

Swiper 将 CSS 类添加swiper-slide-active到活动页面，因此我正在检查幻灯片是否具有该类，如果有，则更改图像以反映此页面更改。

var mySwiper = new Swiper('.swiper-container',{
    onSlideChangeEnd : function(swiperHere) {
        changeNav();
        var swiperPage = mySwiper.activeSlide()
        console.log(swiperPage);
    }
});
function changeNav() {
    if ($('#pageTwo').hasClass("swiper-slide-active")) { 
        console.log('page is 2');
        $('.navbar').attr("src","navbar-secondpage.png");
    }
    else {
        console.log('page is 1');
        $('.navbar').attr("src","navbar-firstpage.png");
    }
};

如果您有多个页面，则可以使用 try catch 语句。

于 2014-01-14T16:14:44.070 回答