Я пытаюсь изменить размер боковых решеток всякий раз, когда изображение меняется.

У меня есть мой javascript, который пытается захватить высоту изображения после его изменения

var imgHeight = $('#mainImg').height();
var currImg = 0;

var imagesSet = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg"];
var imageLoc = "images/zalman/"

$('#bttnRight').click(function(){
  nextImg();
  imgHeight = $('#mainImg').height();
  resizeBttn();
});

function nextImg(){
  currImg++;
  if(currImg>=imagesSet.length){
      currImg=0;
  }
  $('#mainImg').attr("src",imageLoc + imagesSet[currImg]);
}

function resizeBttn() {
  $(document).ready(function() {
        $('#bttnLeft').css("height",imgHeight);
        $('#bttnLeft').css("bottom",imgHeight/2-5);
  });
  $(document).ready(function() {
        $('#bttnRight').css("height",imgHeight);
        $('#bttnRight').css("bottom",imgHeight/2-5);
  });
}

По какой-то причине он не всегда схватывает высоту в правильное время, а боковые бары останутся на предыдущей высоте.

Ниже у меня есть JSFiddle, который должен работать так, как моя установка.

Пожалуйста, извините любые несоответствия и неэффективность, я учусь.

Просто кажется странным, что иногда он набирал высоту, а иногда нет.

Я также буду прикрепить изображение того, что я иногда вижу из jsfiddle.

Я также прикреплю изображение того, что я вижу на своем сайте, о котором я пишу.

enter image description here

enter image description here

https://jsfiddle.net/6bewkuo5/6/

3
nathan hartmann 14 Янв 2021 в 07:30

1 ответ

Выпуск в том, что ваш JavaScript обращается к высоте изображение перед изображением, что на самом деле было пересмотрено в DOM. Добавление небольшой задержки после назначения нового источника изображения может помочь вещам, но ...

На самом деле вам не нужно использовать JavaScript для установки высоты кнопок.

Вы можете добиться того, что вы после завершили кнопки и изображение внутри контейнера с атрибутом CSS {{{x0}}.

Как это:

.container {
  display: flex;
  justify-content: center;
}
<div class="container">
  <button class="prev">&lt;</button>
  <img src="https://www.avalonwinery.com/wp-content/uploads/2013/12/200x300.gif">
  <button class="next">&gt;</button>
</div>

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

Запустите пример ниже

const images = [
  "https://www.avalonwinery.com/wp-content/uploads/2013/12/200x300.gif",
  "https://images.sftcdn.net/images/t_app-logo-xl,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/1578981868/the-test-fun-for-friends-logo.png",
  "https://hiveconnect.co.za/wp-content/uploads/2018/05/800x600.png",
  "https://upload.wikimedia.org/wikipedia/commons/b/b5/800x600_Wallpaper_Blue_Sky.png"
]

const imageEl = document.querySelector('img')
let imageIndex = 0

document.querySelector('.prev').addEventListener('click', e => {
  if (--imageIndex < 0) { imageIndex = images.length - 1 }
  imageEl.src = images[imageIndex]
})

document.querySelector('.next').addEventListener('click', e => {
  if (++imageIndex > images.length - 1) { imageIndex = 0 }
  imageEl.src = images[imageIndex]
})
body {
  background-color: #206a5d;
  color: #ffffff;
  text-align: center;
}

.container {
  display: flex;
  justify-content: center;
}

img {
  max-width: 50%;
}
<h1>Zalman Build</h1>
<div class="container">
  <button class="prev">&lt;</button>
  <img src="https://www.avalonwinery.com/wp-content/uploads/2013/12/200x300.gif">
  <button class="next">&gt;</button>
</div>
3
camaulay 14 Янв 2021 в 05:34