Question

我是jQuery＆amp;的新手Javascript和我正在尝试重新制作Apple 5s滑动页面，您可以在此处看到：http://www.apple.com/iphone-5s/。我现在很远，但是当你快速滚动时它不会停止调用该功能。我的意思是，如果你用我的代码快速向下滚动你基本上得到最低的幻灯片。但是在Apple的网站上，幻灯片动画必须在你再次调用动画之前完成。我在实现这个问题时遇到了问题。这是我的代码。

HTML：

<div id="slider">
    <div id="slide1"></div>
    <div id="slide2"></div>
    <div id="slide3"></div>
</div>

jQuery：

// jQuery for Sliding
$(document).ready(function() {
    var scroll = 1;
    var currentScroll = 1;
    var totalSlides = $("#slider").children().length;
    $("#slider").children().hide();
    $("#slide1").show();
    $(window).bind('mousewheel', function(event) {
        if (event.originalEvent.wheelDelta >= 0) {
            // Scroll event up
            currentScroll = scroll;
            scroll = scroll - 1;
            if (scroll < 1) { 
                scroll = 1;
            } 
            else { 
                $("#slide" + currentScroll).hide("slide", {
                    direction : 'down'
                }, 700);
                $("#slide" + scroll).show("slide", {
                    direction : 'up'
                }, 700);
            }

        } else {
            // Scroll event down
            currentScroll = scroll;
            scroll++;
            if (scroll < totalSlides + 1) {
                $("#slide" + currentScroll).hide("slide", {
                    direction : 'up' 
                }, 700); 
                $("#slide" + scroll).show("slide", { 
                    direction : 'down'
                }, 700);  
            } 
        } 
    }); 
});

感谢您的帮助！

Answer 1

在Apple的页面上，它不会隐藏/显示幻灯片，只是根据鼠标滚轮方向将其锚定到固定点（幻灯片offset().top位置）。单独绑定'mousewheel'不适用于其他浏览器，例如firefox，它应该是'mousewheel DOMMouseScroll'。此外，firefox上的'mousewheel-down'会在chrome上返回一个正值，它是负值。

这应该是mousewheel事件结构，跨浏览器：

$(window).on('mousewheel DOMMouseScroll', function(e){
    e.preventDefault();

    var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;

    if(delta < 0) { 
        //mousewheel down
    }else{
        //mousewheel up
    }
});

我们需要确定当前正在锚定哪个幻灯片，我们可以添加一个“活动”类作为指标。如果用户的鼠标滚轮方向已关闭，请移至next()幻灯片并在此幻灯片上重新分配“活动”类。如果用户用户的鼠标滚轮方向已启动，请移至当前“活动”幻灯片的prev()幻灯片，然后重新分配“活动”类。

$(document).ready(function(){
$(window).on('mousewheel DOMMouseScroll', function(e){
    e.preventDefault();      
    var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;
    //get the current active slide
    var $active = $('#slider > .active');

    if(delta < 0) { 
        //mousewheel down
        var $next = $active.next();
        //check if there's a next slide available
        if($next.length){
            //animate scrolling to the next slides offset top
           $('body, html').stop(true).animate({scrollTop:$next.offset().top},'slow');
           //move also the indicator class 'active'
           $next.addClass('active').siblings().removeClass('active');
        }

    }else{
        //mousewheel up
        var $prev = $active.prev();
        if($prev.length){
             //animate scrolling to the previous slides offset top
            $('body, html').stop(true).animate({scrollTop:$prev.offset().top},'slow'); 
            $prev.addClass('active').siblings().removeClass('active');
        }
    }
});  
});

请参阅此jsfiddle。

鼠标滚轮像Apple 5s页面一样滑动

1 个答案: