1

编辑 重写这篇文章的大部分内容，因为我对代码进行了一些改进并将我的大脑围绕着这个问题......这个滑块是为了响应和流畅，滑动元素是，但是在调整活动元素的大小时不对齐。

要查看问题：

  1. 选择数字 2 菜单项
  2. 等待滑块移动到第二个场景
  3. 调整屏幕大小。你会注意到第二个和第三个场景都是可见的！

jsfiddle在这里

我似乎无法弄清楚如何通过调整大小的像素量来移动边距。我即将开始寻找resize(window).before & resize(window).after！也许有更好的方法......请告诉我。

谢谢。

HTML：

<div id='main'>
    <div id="introAnime">
        <div class='sliderNav prevNext'>
            <button data-dir='prev' class='left'><span><</span></button>
            <button data-dir='next' class='right'><span>></span></button>
        </div>

    <div class='sliderNav sceneBtns'>
        <button data-dir='1'>1</button>
        <button data-dir='2'>2</button>
        <button data-dir='3'>3</button>
    </div>
        <div class="sliderContent">
            <ul>
              <li class="">1<div class="showScene"></div></li>
              <li class="">2<div class="showScene"></div></li>
              <li class="">3<div class="showScene"></div></li>
            </ul>
        </div>
    </div>
</div>​

JS：

$(window).resize(function() {

  grabVars();
  $('.showScene').css({
    'width' : contWidth + 'px'
  });
  naviSetup();

});

$(document).ready(function(){
    grabVars();
    naviSetup();
    animeSetup();

    $('.sliderNav').find('button').on('click', function(){
        moveTo = $(this).data('dir');
        move(moveTo);
    });
});

function grabVars(){
    introAnimeWidth = $('#introAnime').width();
    contWidth = $('.sliderContent').width();
    contHeight = $('.sliderContent').height();
    numScenes = $('.showScene').length;
    sceneMarginLeft = $('.sliderContent ul')
        .css('margin-left').replace('px','');
}
function naviSetup(){
    $('.sliderNav').show();
    $('.prevNext .right').css({
        'left' : ((introAnimeWidth - 43) + 'px')
    });
    sceneBtnsLeft = (introAnimeWidth - $('.sceneBtns').width())/2;
    $('.sceneBtns').css({
        'left' : sceneBtnsLeft
    });
}
function animeSetup(){
    $('.sliderContent').css({
        'overflow' : 'hidden'
    });
    $('.showScene').css({
        'width' : contWidth + 'px',
        'height' : contHeight + 'px'
    });
}
function move(moveTo){
    grabVars();
    if (moveTo == 'next')
    {
        if ( sceneMarginLeft <= (-1) * ((1*numScenes) - 1) * (contWidth*1) )
        {
            moveValue = 0;
        }
        else
        {
            moveValue = sceneMarginLeft - contWidth;
        }
    }
    else if (moveTo == 'prev')
    {
        if ( sceneMarginLeft >= 0 )
        {
            moveValue = (-1) * ((1*numScenes) - 1) * (contWidth*1);
        }
        else
        {
            moveValue = (1*contWidth) + (1*sceneMarginLeft);
        }
    }
    else
    {
        moveValue = -((moveTo-1) * contWidth);
    }

    $('.sliderContent ul').animate({
        'margin-left' : moveValue + 'px'
    }, 'slow');


}​

CSS：

#main{
    width: 80%;
    margin: auto;
}
#introAnime{
    width: 100%;
    position: relative;
    height:300px;
    border: 2px solid #cccccc;
    margin-bottom: 5%;
    margin-top: 2%;
    border-radius: 20px;
      box-shadow:
        1px 1px 0 0 #014D06,
        2px 2px 0 0 #014D06,
        3px 3px 0 0 #014D06,
        4px 4px 0 0 #014D06,
        5px 5px 5px 0 #000000;
}
.showScene{
    height: 200px;
    width: 680px;
}
#introAnime ul li:nth-child(1){
    background-color: #669900;
}
#introAnime ul li:nth-child(2){
    background-color: blue;
}
#introAnime ul li:nth-child(3){
    background-color: orange;
}
.sliderContent{
    overflow: scroll;
    margin: 50px;
    color:#ffffff;
    text-size: 3em;
}

.sliderContent ul {
    width: 10000px;
    height: 100%;
    list-style: none;

}
.sliderContent ul li{
    float:left;
    list-style-type: none;
}
.sliderNav{
    position: absolute;
    display: none;

}
.sliderNav button{
    cursor: pointer;
}
.prevNext {
    top: 255px;
}
.prevNext button{
    width: 40px;
    height: 40px;
    color: #ffffff;
    font-size: 1.5em;

}
.prevNext .left{
    position: absolute;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 20px;
    left: 5px;

}
.prevNext .right{
    position: absolute;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    left: 737px;

}
.sceneBtns{
    border: 2px solid #cccccc;
    padding: 5px;
    border-top: 0px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    left: 195px;
}
.sceneBtns button{
    background-color: #ffffff;
    border: none;
    font-size: 10pt;
    color: #669900;
    padding-left: 10px;
    padding-right: 10px;
}
.sceneBtns button:nth-child(1){
    border-right: 2px solid #669900;

}
.sceneBtns button:nth-child(2){
    border-right: 2px solid #669900;

}​
4

1 回答 1

0

固定和更新的小提琴！

关键是跟踪活动滑动元素并从窗口调整大小调用一个函数，该函数根据新宽度和活动幻灯片设置 ul 边距，如下所示：

function resizeMargin(){
    $('.sliderContent ul').css({
        'margin-left' : -1*(activeSlide-1)*contWidth + 'px'
    });        
}
于 2012-11-08T00:42:10.153 回答