Question

我用图像做了一个响应式溢出容器，我想放两个按钮来左右动画幻灯片。动画必须停在右边按钮的最后一个图像和左边按钮的第一个图像上。

网站全屏，页眉和页脚高度为50px，中间内容响应。

这是我的代码。

样式表

html, body
{
    min-height:100%;
    padding:0;
    margin:0;
}

#wrapper
{
    padding:50px 0;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

#content
{
    height: 100%;
    box-sizing: border-box;
    overflow:scroll;
    white-space:nowrap;
    position:relative;
    /*overflow-y: hidden;*/
}

 header
{
    margin-top:-50px;
    height:50px;
    background-color:red;
}

 footer
{
    margin-bottom:-50px;
    height:50px;
    background-color:red;
}

 .imagg
{
    max-height:100%;
    max-width: 100%;
}

  .container
{
    background:#FF0;
    position:absolute;
    width:100% !important;
    height:100% !important;
    max-height:100% !important;
}

和html

<div id="wrapper">
<header></header>
<div id="content">
    <div class="container">
        <img src="test.jpg" class="imagg" id="first" />
        <img src="test.jpg" class="imagg" />
        <img src="test.jpg" class="imagg" />
        <img src="test.jpg" class="imagg" />
        <img src="test.jpg" class="imagg" />
        <img src="test.jpg" class="imagg" />
        <img src="test.jpg" class="imagg" />
        <img src="test.jpg" class="imagg" id="last" />
    </div>
</div>
<button id="left">&laquo;</button>
<button id="right">&raquo;</button>

<script type="text/javascript">
    $("#right").click(function() {
    $( ".container" ).animate({ "left": "+=200px" }, "slow" );
});

    $("#left").click(function() {
    $( "#container" ).animate({ "right": "-=200px" }, "slow" );
});
</script>
<footer></footer>

Answer 1

var numOfSlide=3;
var navigation=numOfSlide;
$("#right").click(function() {     
    if(navigation<(numOfSlide+(numOfSlide-1))){
         $( ".container" ).animate({ "left": "+=200px" }, "slow" );
        navigation++;
    }  
});

$("#left").click(function() {
    if(navigation > (numOfSlide-(numOfSlide-1))){
         $( ".container" ).animate({ "left": "-=200px" }, "slow" );
        navigation--;
   }     
});

检查这个小提琴：http://jsfiddle.net/fTnvE/

在溢出div中滚动响应内容

1 个答案: