Слайдшоу с прокруткой на 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>
MarkGaos
Если информация на нашем сайте была полезна для Вас и вы хотели бы нас как-то отблагодарить, ниже есть форма Добровольных пожертвований. Все собранные средства пойдут на оплату сервера и развитие райта.
