1

问候

我对 JavaScript 和 Jquery 还比较陌生，我知道肯定有比我正在使用的方法更好的方法。

我正在研究一个 serialScroll 实现。有一个主 scrollTo 控制多个幻灯片的左/右移动。每张幻灯片都包含它自己的垂直serialScroll 实现。我在 scrollTo 上的调整大小工作得很好，在垂直方向上调整大小工作但我想不出一个优雅的方法来确保在调整当前位置时保持居中，我当前的方法有效但效率很低。

$(function(){

var $up = $('#sec1_nav a.up').hide();//up button -- each slide needs it's own unique nav buttons
var $down = $('#sec1_nav a.down');//down button -- each slide needs it's own unique nav buttons 

        $('#screen1').serialScroll({
            target:'#section1',
            items:'.item', 
            prev:'#sec1_nav a.up',
            next:'#sec1_nav a.down',    
            axis:'y',
            duration:1000,
            force:true,
            cylce: false,

            onBefore:function( e, elem, $pane, $items, pos ){
            $up.add($down).show();  
            if( pos == 0 )$up.hide();
                else if( pos == $items.length -1 )
                    $down.hide();

                   // Here's where it get ugly, I'am adding a unique class for each slide to the item's
            $('.item').removeClass('pos1'); //Each slides need's it's own class i.e. slide1 = pos1, slide2 = pos2 etc.
                    $(elem).addClass('pos1');
                }                   
            }); 
            $(window).bind("resize", function(){
                resize1(); // Same goes for the resize function, each slide need's it's own function.
            });     
    });
    function resize1() {

    height = $(window).height();
    width = $(window).width();

    mask_height = height * $('.item').length; // sets the new mask height 

    // Resize Height of the area
    $('.sections').css({height: height, width : width});
    $('.item').css({height: height, width : width});
    $('#mask').css({height : mask_height, width : width});

    $('.sections').scrollTo('.pos1', 0 ); // This issue is where it all fall apart, instead of using serialScroll, i'am stuck using scrollTo to maintain the current slide position.
}
4

0 回答 0