Прокрутка адаптивного контента в переполнении div

0

Я сделал отзывчивый контейнер переполнения с изображениями, и я хочу поставить 2 кнопки, чтобы сделать анимационный слайд влево и вправо. Анимация должна перейти к последнему изображению для правой кнопки и к первому изображению левой кнопки.

Веб-сайт является полноэкранным с верхним и нижним колонтитулом высотой 50 пикселей и средним содержимым.

Вот мой код.

стилей

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>

Теги:
scroll
overflow

1 ответ

0
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/

  • 0
    А если я хочу начать с первого изображения (слева) и закончить до последнего изображения? Без пробелов справа и слева? Таким образом, правая кнопка останавливается, когда отображается последнее изображение, и левая, когда отображается первое изображение.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню