Форум

exec · #1 (**permalink**) 14.03.2017, 07:00

В общем делаю слайдер для изображений, есть некий див с 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>

Как сделать так, чтобы картинки шли в один ряд?

рони · #2 (**permalink**) 14.03.2017, 07:21

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>

exec · #3 (**permalink**) 14.03.2017, 07:46

Вроде получилось, спасибо

<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>

exec · #4 (**permalink**) 24.03.2017, 15:59

Опять проблема с 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, и полосы прокрутки появлялись при необходимости.

Как так сделать?

ksa · #5 (**permalink**) 24.03.2017, 16:25

Сообщение от exec

Как так сделать?

Как вариант...

<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>

Форум

Справочник

Discord чат

Курсы javascript