overflow:hidden
В общем делаю слайдер для изображений, есть некий див с overflow: hidden, в который добавляется много-много уменьшенных копий изображений, по клику на копию будет показываться полная версия, но вопрос не об этом.
<div id="thumbs" style="border: 1px solid black; width: 350px; height: 50px; overflow: hidden"></div>
<script>
var thumbs = document.getElementById("thumbs");
for (var i = 0; i < 10; i++) {
var img = document.createElement("IMG");
img.height = "50";
img.src = "http://farmeadow.com/wp-content/gallery/homepage/home5.jpg";
thumbs.appendChild(img);
}
</script>
Как сделать так, чтобы картинки шли в один ряд? |
exec,
вложить картинки в контейнер с необходимой шириной exec, <!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#thumbs > div {
width: 2000%;
}
</style>
</head>
<body>
<div id="thumbs" style="border: 1px solid black; width: 350px; height: 50px; overflow: hidden"></div>
<script>
var thumbs = document.getElementById("thumbs"), div = document.createElement("DIV");
for (var i = 0; i < 10; i++) {
var img = document.createElement("IMG");
img.height = "50";
img.src = "http://farmeadow.com/wp-content/gallery/homepage/home5.jpg";
div.appendChild(img);
}
thumbs.appendChild(div)
</script>
</body>
</html>
|
Вроде получилось, спасибо
<p>
Прокрутка стрелками вправо и влево
</p>
<div style="border: 1px solid black; height: 50px; width: 350px; overflow: hidden">
<div id="thumbs" style="width: 10000px">
</div>
</div>
<script>
var thumbs = document.getElementById("thumbs");
for (var i = 0; i < 10; i++) {
var img = document.createElement("IMG");
img.height = "50";
img.src = "http://farmeadow.com/wp-content/gallery/homepage/home5.jpg";
thumbs.appendChild(img);
}
window.onkeydown = function (e) {
if (e.keyCode == 37) slide(-50);
if (e.keyCode == 39) slide(50);
};
var m = 0;
function slide(d) {
var w = getWidth();
m += d;
if (m > 0) m = 0;
if (m < -w + 350) m = -w + 350;
thumbs.style.marginLeft = m + "px";
}
function getWidth() {
var images = thumbs.getElementsByTagName("IMG");
var sum = 0;
for (var i = 0; i < images.length; i++) {
sum += images[i].clientWidth;
}
return sum;
}
</script>
|
Опять проблема с overflow, есть такой html:
<div style="overflow: hidden; width: 200px; height: 100px; border: 1px solid black">
<div style="overflow: auto">
текст1<br />
текст2<br />
текст3<br />
текст4<br />
текст5<br />
текст6<br />
текст7<br />
текст8<br />
текст9<br />
текст10<br />
</div>
</div>
Полосы прокрутки у внутреннего дива не появляются несмотря на overflow:auto. Нужна именна такая структура, чтобы у внешнего дива overflow:hidden, а у внутреннего overflow:auto, и полосы прокрутки появлялись при необходимости. Как так сделать? |
Цитата:
<div style="overflow: hidden; width: 200px; height: 100px; border: 1px solid black">
<div style="height: 100%; overflow: auto">
текст1<br />
текст2<br />
текст3<br />
текст4<br />
текст5<br />
текст6<br />
текст7<br />
текст8<br />
текст9<br />
текст10<br />
</div>
</div>
|
| Часовой пояс GMT +3, время: 05:49. |