主页 / 问题 / 802104
Accepted
Дмитрий Сухоцкий
Asked:2020-03-20 22:30:06 +0000 UTC2020-03-20 22:30:06 +0000 UTC

香草js画廊

  • 772

先生们，我正在尝试编写一个简单的画廊，将图像切换为 js。从平庸的例子中，我发现了这一点。我所理解的 - 评论。我寻求帮助以咀嚼代码或用更简单的代码替换它。

    var largeImg = document.getElementById('largeImg');// находим главную
    document.getElementById('thumbs').onclick = function(event) { //по нажатию ловим событие блока thumbs
        var target = event.target; //как понимаю элемент который нажали

        while (target != this) { //здесь теряюсь, если нажатый эл. не из thumbs тогда

            if (target.nodeName == 'A') { //если родитель не А? не понял, ссылка просто "а"
            showThumbnail(target.href, target.title);//запуск функции 
 и запись вытянутых параметров из нажатого элемента 
            return false; // ?
            }

            target = target.parentNode; //если иф не отработал - то?
        }
}

function showThumbnail(href, title) { // сама функция присвоения новых параментов 
  largeImg.src = href;
  largeImg.alt = title;
}
  #largeImg {
    border: solid 1px red;
    width: 550px;
    height: 400px;
    padding: 5px;
  }
  
  #thumbs a {
    border: solid 1px blue;
    width: 200px;
    height: 200px;
    padding: 3px;
    margin: 2px;
    float: left;
  }
  
  #thumbs a:hover {
    border-color: #FF9900;
  }
<div class="section">
    <div class="container">
        <div class="row">
  <p><img id="largeImg" src="./img/bmwx6.jpg" alt="Large image"></p>
</div>
<div class="row">
  <div id="thumbs">
    <a href="./img/auto1.jpg" title="Image 3"><img src="./img/auto1.jpg" width="100%" height="100%"></a>
    <a href="./img/auto2.jpg" title="Image 4"><img src="./img/auto2.jpg" width="100%" height="100%"></a>
    <a href="./img/avtoservice.jpg" title="Image 5"><img src="./img/avtoservice.jpg" width="100%" height="100%"></a>
    <a href="./img/banner.jpg" title="Image 6"><img src="./img/banner.jpg" width="100%" height="100%"></a>
  </div>
</div>
</div>
</div>

javascript

1 个回答

  1. Best Answer
    // главное изображение, далее ему будет подставляться ссылка на изображение, 
// по миниатюре которого будет клик
var largeImg = document.getElementById('largeImg');
// слушаем клик на всей галерее
document.getElementById('thumbs').onclick = function(event) {
// определяем объект в дереве thumbs, на котором непосредственно и был клик    
var target = event.target;
// если клик не по thumbs (как верхнему родителю), подразумевается клик по изображению (по одному из потомков)
while (target != this) { 
    // если кликнули по тегу <a>
    if (target.nodeName == 'A') {
        // вызываем пользовательскую функцию, в неё передаём атрибуты
        // href и title "кликнутой" ссылки
        showThumbnail(target.href, target.title);
        // и успокаиваемся до следующего акшОна
        return false; 
        }
        // если клик был не по тегу <a>, смотрим родительский по отношению
        // к "кликнутому" элемент и погнали снова.
        target = target.parentNode; 
    }
}

// да да да
function showThumbnail(href, title) { 
    largeImg.src = href;
    largeImg.alt = title;
}

    var target = event.target;在这里，您会看到事件下沉id="thumbs"——点击传播到它的孩子。

    • 0

相关问题