jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

init

Browse source
This commit is contained in:
Ilya Kantor 2014-10-26 22:10:13 +03:00
parent 06f61d8ce8
commit f301cb744d
2271 changed files with 103162 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

71
02-ui/02-events-and-interfaces/01-introduction-browser-events/06-carousel/solution/index.html Executable file
View file

@ -0,0 +1,71 @@
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="carousel">
<a href="#" class="arrow left-arrow" id="prev">&#8249; </a>
<div class="gallery">
<ul id="images">
<li><img src="http://js.cx/carousel/1.png"></li>
<li><img src="http://js.cx/carousel/2.png"></li>
<li><img src="http://js.cx/carousel/3.png"></li>
<li><img src="http://js.cx/carousel/4.png"></li>
<li><img src="http://js.cx/carousel/5.png"></li>
<li><img src="http://js.cx/carousel/6.png"></li>
<li><img src="http://js.cx/carousel/7.png"></li>
<li><img src="http://js.cx/carousel/8.png"></li>
<li><img src="http://js.cx/carousel/9.png"></li>
<li><img src="http://js.cx/carousel/10.png"></li>
</ul>
</div>
<a href="#" class="arrow right-arrow" id="next">&#8250; </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';
return false;
};
</script>
</body>
</html>