0

То есть при клике на любую картинку в галерее она добавляется в блок, с этим все нормально, а при клике на стрелочки влево или вправо - эти стрелочки добавляются в блок, что неправильно, нужно сделать так, чтобы при клике на стрелочки в блок добавлялась соседняя картинка по списку, т.е вправо - следующая картинка, влево - предыдущая. Нужно сделать через nextSibling, previousSibling. Код:

<style>
    *{
        margin:0px;
        padding:0px;
    }

    .container{
        width:100%;
        max-width: 1200px;
        margin:0 auto;
        text-align: center;
    }

    .gallery{
        margin-top:30px;
    }

    .switch-img-big, .gallery{
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .image{
        cursor: pointer;
        padding:5px 5px
    }

    #big-img{
        width:100%;
        max-width:702px;
        background-size: cover;
        background-position: center;
        height:552px;
        border:solid #000 1px;
        display:inline-block;
    }

    .character{
        width:100%;
        max-width:702px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height:552px;
        display:inline-block;
    }

    .arrow-left,
    .arrow-right{
        cursor:pointer;
    }

    .arrow-left{
        padding-right:10px;
    }
    .arrow-right{
        padding-left:10px;
    }

    .big-img{
        background-image: url(img_big/kung-lao.jpg);
    }

    .big-img_2{
        background-image: url(img_big/sub-zero.jpg);
    }

    .big-img_3{
        background-image: url(img_big/erron-black.jpg);
    }

    .big-img_4{
        background-image: url(img_big/sector.jpg);
    }
</style>

   <script>

    window.onload = function() {
        var images = document.getElementsByClassName('image');
        for(var i = 0; i < images.length; i++){
            images[i].onclick = changeBigPicture;
        }           

        var prev = document.getElementById('arrow-left');
        prev.onclick = pimage;

        var next = document.getElementById('arrow-right');
        next.onclick = nimage;
    }


    function changeBigPicture(target) {
        var bigDiv = document.getElementById('big-img');
        bigDiv.innerHTML = '';
        var smallSrc = event.target.getAttribute('src');
        selectedimg = event.target;
        var newImg = document.createElement('img');
        newImg.src = smallSrc.replace('img_small', 'img_big');
        bigDiv.appendChild(newImg);  
    }  


   function pimage() {
       var target = selectedimg.previousSibling;
       changeBigPicture(target);
   }

    function nimage() {
        var target = selectedimg.nextSibling;
        changeBigPicture(target);
    }

</script>

<div class="container">
    <div class="switch-img-big">
        <div id="big-img"></div>      
    </div>

    <div class="gallery">
        <img src="img_small/arrow-left.png" alt="" id="arrow-left">
        <img class="image" src="img_small/kung-lao.jpg" alt="">
        <img class="image" src="img_small/sub-zero.jpg" alt="">
        <img class="image" src="img_small/erron-black.jpg" alt="">
        <img class="image" src="img_small/sector.jpg" alt="">
        <img src="img_small/arrow-right.png" alt="" id="arrow-right">
    </div>
</div>
0

1 ответ 1

0

В результате выполнения задания вы хотите получить рабочий слайдер? Думаю подобных примеров в интернете очень много, например вот. И еще, и вот что-то подобное.

1
  • проще говоря, я хочу получить таргет у текущей картинки, и по стрелочкам переключатся к соседям 4 янв 2019 в 23:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.