Я сделал отзывчивый контейнер переполнения с изображениями, и я хочу поставить 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">«</button>
<button id="right">»</button>
<script type="text/javascript">
$("#right").click(function() {
$( ".container" ).animate({ "left": "+=200px" }, "slow" );
});
$("#left").click(function() {
$( "#container" ).animate({ "right": "-=200px" }, "slow" );
});
</script>
<footer></footer>
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/