чертовщина с Math.max
есть код
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
body {
padding: 10px
}
.carousel {
position: relative;
width: 398px;
padding: 10px 40px;
border: 1px solid #CCC;
border-radius: 15px;
background: #eee;
}
.carousel img {
width: 130px;
height: 130px;
display: block; /* если не поставить block, в ряде браузеров будет inline -> лишнее пространтсво вокруг элементов */
}
.carousel .arrow {
position: absolute;
top: 57px;
padding: 3px 8px 8px 9px;
background: #ddd;
border-radius: 15px;
font-size: 24px;
color: #444;
text-decoration: none;
}
.carousel .arrow:hover {
background: #ccc;
}
.carousel .left-arrow {
left: 7px;
}
.carousel .right-arrow {
right: 7px;
}
.galery {
width: 390px;
overflow: hidden;
}
.galery ul {
height: 130px;
width: 9999px;
margin: 0;
padding: 0;
list-style: none;
-webkit-transition:all 1s ease;
}
.galery ul li {
float: left;
}
</style>
</head>
<body>
<div class="carousel">
<a href="#" class="arrow left-arrow" id="prev">‹ </a>
<div class="galery">
<ul id="images">
<li><img src="http://ru.lookatcode.com/show/9635578938759863/1.png"></li>
<li><img src="http://ru.lookatcode.com/show/9635578938759863/2.png"></li>
<li><img src="http://ru.lookatcode.com/show/9635578938759863/3.png"></li>
<li><img src="http://ru.lookatcode.com/show/9635578938759863/4.png"></li>
<li><img src="http://ru.lookatcode.com/show/9635578938759863/5.png"></li>
<li><img src="http://ru.lookatcode.com/show/9635578938759863/6.png"></li>
<li><img src="http://ru.lookatcode.com/show/9635578938759863/7.png"></li>
<li><img src="http://ru.lookatcode.com/show/9635578938759863/8.png"></li>
<li><img src="http://ru.lookatcode.com/show/9635578938759863/9.png"></li>
<li><img src="http://ru.lookatcode.com/show/9635578938759863/10.png"></li>
</ul>
</div>
<a href="#" class="arrow right-arrow" id="next">› </a>
</div>
<script>
/* этот код помечает картинки, для удобства разработки */
var lis = document.getElementsByTagName('li');
for(var i=0; i<lis.length; i++) {
lis[i].style.position='relative';
var span = document.createElement('span');
// обычно лучше использовать CSS-классы,
// но этот код - для удобства разработки, так что не будем трогать стили
span.style.cssText='position:absolute;left:0;top:0';
span.innerHTML = i+1;
lis[i].appendChild(span);
}
/* конфигурация */
var width = 130; // ширина изображения
var count = 3; // количество изображений
var ul = document.getElementById('images');
var imgs = ul.getElementsByTagName('li');
var position = 0; // текущий сдвиг влево
document.getElementById('prev').onclick = function() {
if (position >= 0) return false; // уже до упора
// последнее передвижение влево может быть не на 3, а на 2 или 1 элемент
position = Math.min(position + width*count, 0)
ul.style.marginLeft = position + 'px';
return false;
}
document.getElementById('next').onclick = function() {
if (position <= -width*(imgs.length-count)) return false; // уже до упора
// последнее передвижение вправо может быть не на 3, а на 2 или 1 элемент
position = Math.max(position-width*count, -width*(imgs.length-count));
ul.style.marginLeft = position + 'px';
alert(Math.max(position-width*count, -width*(imgs.length-count)) + " "+position);
//вот тут не могу понять почему в position одно значение а Math.max возвращает другое
return false;
};
</script>
</body>
</html>
проблема в 67 строке |