Top Ad unit 728 fff 90

Слайдшоу с прокруткой на JQuery



<html>

<head>

<script src="http://code.jquery.com/jquery-latest.js "></script><!-- подключаем актуальную библиотеку -->

<script>

$(document).ready(function() {

$("#photos_inner").css({'left':'0'});<!-- устанавливаем начальное положение, нам это понадобится для проверки -->

var scrollAmount = $("#photos_inner img").width();<!-- запоминаем ширину картинки -->

var scrollWidth = $("#photos_inner").width()-$("#photos").width();<!-- вычисляем видимую ширину блока с картинками -->

 

$('#left').click(function() {<!-- отлавливаем нажатие на блок лефт -->

var currentPos = Math.abs(parseInt($('#photos_inner').css('left')));<!-- запоминаем позициию блока с картинками -->

if(currentPos>0){<!-- если позиция сдвинута вправо -->

$(

"#photos_inner").animate({'left':'+=' + scrollAmount}, 'slow');<!-- сдвигаем влево на ширину картинки -->

}else{<!-- иначе -->

$(

"#photos_inner").animate({'left':'-'+scrollWidth}, 'slow');<!-- сдвигаем блок на начальное положение -->

}

});

 

$('#right').click(function() {<!-- отлавливаем нажатие на блок вправо -->

var currentPos = Math.abs(parseInt($('#photos_inner').css('left')));<!-- запоминаем позициию блока с картинками -->

if(currentPos<scrollWidth){

$(

"#photos_inner").animate({'left':'-=' + scrollAmount}, 'slow');<!-- сдвигаем вправо на ширину картинки -->

}else{

$(

"#photos_inner").animate({'left':'0'}, 'slow');<!-- сдвигаем блок на начальное положение -->

}

});

 

setInterval(function(){var currentPos = Math.abs(parseInt($('#photos_inner').css('left'))); <!-- автоскрок блока -->

if(currentPos<scrollWidth){

$(

"#photos_inner").animate({'left':'-=' + scrollAmount}, 'slow');

}else{

$(

"#photos_inner").animate({'left':'0'}, 'slow');

}},5000);

 

});

</script>

<style>

#photos {

margin:0 auto;

overflow: hidden;

width: 600px;

}

#photos_inner {

height: 100px;

width: 1500px;

position: relative;

}

#photos_inner img {

float: left;

width: 100px;

height: 100px;

}

#left{

position:absolute;

top:30px;

margin-left:-50px;

height:50px;

width:50px;

background:red;

}

#right{

position:absolute;

top:30px;

margin-left:600px;

height:50px;

width:50px;

background:red;

}

</style>

</head>

<body>

<div id="photos">

<div id="left"></div>

<div id="photos_inner">

<img alt="1" src="images/1.png" />

<img alt="2" src="images/2.png" />

<img alt="3" src="images/3.png" />

<img alt="4" src="images/4.png" />

<img alt="5" src="images/5.png" />

<img alt="6" src="images/6.png" />

<img alt="7" src="images/7.png" />

<img alt="8" src="images/8.png" />

<img alt="9" src="images/9.png" />

<img alt="10" src="images/10.png" />

<img alt="11" src="images/11.png" />

<img alt="12" src="images/12.png" />

<img alt="13" src="images/13.png" />

<img alt="14" src="images/14.png" />

<img alt="15" src="images/15.png" />

</div>

<div id="right"></div>

</div>

</body>

</html>
All Rights Reserved by ProcessPlus 2014 - 2018

Написать нам

Имя

Email *

Сообщение *