Basic Image Viewer с javaScript

Я новичок в JavaScript, и я пытаюсь учиться по кодированию. Я хочу создать базовый просмотрщик изображений со «следующим» и «предыдущим», который вы можете щелкнуть, чтобы переместить вперед и вернуться в галерею из десяти картин. Поэтому у меня есть мои html, мои css и мои javaScript-файлы и 10 случайных снимков, чтобы попробовать. файлы довольно прямо вперед:Basic Image Viewer с javaScript

HTML:

<body> 
    <div id="wrap"> 
     <div class="firstColumn"> 
      <p>PHOTOGRAPHY</p> 
      <div class="firstColumnSub"> 
       <p class="photo">SOME TITLE</p> 
      </div> 
     </div> 
     <div class="back"> 
      <p><a href="index.html">BACK</a></p> 
     </div> 
     <div id="container"> 
      <div id="controllers"> 
       <div class="buttons" id="previous"> 
        <p onclick="change(-1);">PREVIOUS</p> 
       </div> 
       <div class="buttons" id="next"> 
        <p onclick="change(1);">NEXT</p> 
       </div> 
      </div> 
      <div><img height="100%" id="front" src="Image1.jpg"></div> 
      <div> 
       <p id="footer">Footer</p> 
      </div> 
     </div> 
    </div> 
</body>

Всего несколько див с изображением в центре и предыдущим и следующими интерактивными тегами. Это то, что он Лоос, как:

Файл JavaScript содержит функцию, которая загружает различную pitures и й это мой проблемные центры их в середине страницы, захватывая их ширину и обновление CSS:

JavaScript:

window.onload = function setUp() { 
    var b = document.getElementById("front").width; 
    document.getElementById("container").style.width = b + "px" 
} 

var imageCount = 1; 

function change(x) { 
    imageCount = imageCount + x; 
    var image = document.getElementById('front'); 
    var str1 = "Image"; 
    var str2 = imageCount; 
    var str3 = ".jpg" 
    var sum = str1.concat(str2, str3); 
    image.src = sum; 
    var a = document.getElementById("front").width; 
    document.getElementById("container").style.width = a + "px" 
}

Я не проводкой CSS, если не требуется, но вы получите идею.

При нажатии «следующий» или «предыдущий», вы должны получить такой результат:

... и т.д., но вместо этого я получаю все вроде случайных дисплеев :

И вот что меня озадачивает: если вы продолжаете нажимать «назад» и «дальше», те же снимки появляются во втором раунде, поэтому он работает, но не сразу. Любая помощь ценится! Спасибо, П.

источник

2016-09-02 Paul

Какая проблема? Ширина изображений – Satpal

Да, если вы посмотрите на первые три изображения, они центрированы, а «предыдущие» и «ближайшие» теги выровнены по углам (потому что «контейнер» - это div, содержащий все эти элементы), но если вы смотрите на последние две фотографии, «следующий» и «предыдущий» расположены случайным образом. Как я уже сказал, проблема уходит, если вы продолжаете идти назад и вперед. – Paul

Итак, изображения должны иметь разную ширину, я просто хочу, чтобы они были центрированы независимо от ширины – Paul

Это, скорее всего, проблема позиционирования CSS. Следующий CSS может выполнить эту работу за вас. Если вам нужна дополнительная помощь, я предлагаю вам пересмотреть отправку своего CSS, чтобы получить справку.

#container #front 
{ 
    position: relative; 
    /* width: 0px; */ /* set via JS for each element in this use case */ 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
}

источник

2016-09-02 15:17:51 RandyDaddis

ответ

Смежные вопросы