Тема: overflow:hidden
Показать сообщение отдельно
  #3 (permalink)  
Старый 14.03.2017, 07:46
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

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

<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>
Ответить с цитированием