переход по слайдеру код написан правильно?

09 октября 2021, 07:00

thumbs.addEventListener('click', function(e){ 
  let target = e.target; 
 if( target.closest('a') ){ 
    // thumbs.style.ListStyleType = 'none' 
   e.preventDefault(); 
   let s = target.closest('a') 
   let href = s.getAttribute('href'); 
   let d = largeImg.src = href 
 } 
});

  body { 
    margin: 0; 
    padding: 0; 
    font: 75%/120% sans-serif; 
  } 
 
  h2 { 
    font: bold 190%/100% sans-serif; 
    margin: 0 0 .2em; 
  } 
 
  h2 em { 
    font: normal 80%/100% sans-serif; 
    color: #999999; 
  } 
 
  #largeImg { 
    border: solid 1px #ccc; 
    width: 550px; 
    height: 400px; 
    padding: 5px; 
  } 
 
  #thumbs a { 
    border: solid 1px #ccc; 
    width: 100px; 
    height: 100px; 
    padding: 3px; 
    margin: 2px; 
    float: left; 
  } 
 
  #thumbs a:hover { 
    border-color: #FF9900; 
  } 
 
#thumbs{ 
   list-style-type: none;  
   padding-left: 0; 
}

<p><img id="largeImg" src="https://en.js.cx/gallery/img1-lg.jpg" alt="Large image"></p> 
 
  <ul id="thumbs"> 
    <!-- браузер показывает небольшую встроенную подсказку из атрибута "title" при наведении курсора на текст --> 
    <li> 
      <a href="https://en.js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://en.js.cx/gallery/img2-thumb.jpg"></a> 
    </li> 
    <li> 
      <a href="https://en.js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://en.js.cx/gallery/img3-thumb.jpg"></a> 
    </li> 
    <li> 
      <a href="https://en.js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://en.js.cx/gallery/img4-thumb.jpg"></a> 
    </li> 
    <li> 
      <a href="https://en.js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://en.js.cx/gallery/img5-thumb.jpg"></a> 
    </li> 
    <li> 
      <a href="https://en.js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://en.js.cx/gallery/img6-thumb.jpg"></a> 
    </li> 
  </ul>

Правильно сделал слайдер ?
В стилях есть #thumbs как list-style-type прописать на js ?

Answer 1

• float используют для обтекания текстом, не для позиционирования. Конкретно здесь, можно использовать display: flex; например.
• Ссылки <a> лишние, потому что единстенное что делают - хранят адрес картинки, которую надо показывать при клике. А адрес и так уже есть у <img> — можно клик привязать к самой картинке и сразу оттуда и доставать адрес.
• Хоть оно и понимает, что это про id, если в коде просто написать название id элемента, но это считается плохой практикой (создается глобальная переменная). В коде желательно всегда создавать переменные и сохранять туда элементы через getElementById.
• thumbs.style.listStyleType вы правильно записали, но оно лежало внутри обработчика клика и могло сработать только после клика. Нужно было вынести его оттуда.

let largeImg = document.getElementById('largeImg'); 
let thumbs = document.getElementById('thumbs'); 
thumbs.style.listStyleType = "none"; 
 
thumbs.addEventListener('click', function(e) { 
  let target = e.target; 
  if ( target.tagName === "IMG" ) { 
    largeImg.src = target.dataset.bigImg; 
  } 
});

body { 
  margin: 0; 
  padding: 0; 
  font: 75%/120% sans-serif; 
} 
 
h2 { 
  font: bold 190%/100% sans-serif; 
  margin: 0 0 .2em; 
} 
 
h2 em { 
  font: normal 80%/100% sans-serif; 
  color: #999999; 
} 
 
#largeImg { 
  border: solid 1px #ccc; 
  width: 550px; 
  height: 400px; 
  padding: 5px; 
} 
 
#thumbs li { 
  border: solid 1px #ccc; 
  width: 100px; 
  height: 100px; 
  padding: 3px; 
  margin: 2px; 
} 
 
#thumbs li:hover { 
  border-color: #FF9900; 
} 
 
#thumbs { 
  padding-left: 0; 
  display: flex; 
}

<p><img id="largeImg" src="https://en.js.cx/gallery/img1-lg.jpg" alt="Large image"></p> 
 
<ul id="thumbs"> 
  <li><img src="https://en.js.cx/gallery/img2-thumb.jpg" data-big-img="https://en.js.cx/gallery/img2-lg.jpg"></li> 
  <li><img src="https://en.js.cx/gallery/img3-thumb.jpg" data-big-img="https://en.js.cx/gallery/img3-lg.jpg"></li> 
  <li><img src="https://en.js.cx/gallery/img4-thumb.jpg" data-big-img="https://en.js.cx/gallery/img4-lg.jpg"></li> 
  <li><img src="https://en.js.cx/gallery/img5-thumb.jpg" data-big-img="https://en.js.cx/gallery/img5-lg.jpg"></li> 
  <li><img src="https://en.js.cx/gallery/img6-thumb.jpg" data-big-img="https://en.js.cx/gallery/img6-lg.jpg"></li> 
</ul>