Հաջորդ կոճակի համար ցուցակի հաջորդ կետից ընտրեք img src-ը

Փորձեք սա. Մի փոքր փոփոխեք ձեր նշագրումը.

<div class="content">
    <ol>
        <li class="image-wrapper">
            <div class="block">
                <img data-image-index="1" src="Images/image1.jpg">
            </div>
        </li>

        <li class="image-wrapper">
            <div class="block">
                <img data-image-index="2" src="Images/image2.jpg">
            </div>
        </li>
   </ol>
   <button class="prev-btn">Prev</button>
   <button class="next-btn">Next</button>
</div>

Այնուհետև դուք կարող եք նման բան անել.

var imageCarousel = {
    totalImages: false,
    currentIndex: false,

    init: function() {
        this.totalImages = this.getTotalImages();

        if (this.totalImages) {
            $('.image-wrapper img[data-image-index]').click(function(e){
                e.preventDefault();

                imageCarousel.currentIndex = $(this).data('imageIndex');

                // Show the image here...
            });

            $('.prev-btn, .next-btn').click(function(e){
                e.preventDefault();

                var newIndex = $(this).is('.prev-btn') ? imageCarousel.currentIndex - 1 : imageCarousel.currentIndex + 1,
                    newImageToShow;

                if (newIndex > imageCarousel.totalImages) {
                    newIndex = 1;
                } else if (newIndex == 0) {
                    newIndex = imageCarousel.totalImages;
                }

                newImageToShow = $('.image-wrapper img[data-image-index='+newIndex+']');

                if (newImageToShow.length) {
                    newImageToShow.trigger('click');
                }
            });
        }
    },

    getTotalImages: function() {
        return $('.image-wrapper').length;
    }
}

Եվ անվանեք սցենարը, ակնհայտորեն.

$(function(){
    imageCarousel.init();
});

Ես դա չեմ փորձարկել։ Փորձեք և ստուգեք, արդյոք ստորև նշված կոդը աշխատում է:

var images = document.getElementsByTagName('img');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
var i;

var next = document.getElementsByClassName("next")[0];

for (i = 0; i < images.length; i++) {
    images[i].onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
        /*and this is where it all falls down!*/
        //var indexNo = $(this).index();
        var indexNo = i;
        var nextIndex = indexNo +1;
        var nextItem = document.getElementsByTagName('img')[nextIndex];
    }

    next.onclick = function (){
        newSrc = nextItem.getElementsByTagName.src;
        modalImg.src = newSrc;
    }
}

Եթե ​​դուք պարզապես փորձում եք ձեր ձեռքերը JavaScript-ում՝ դա անելով, ապա դա լավ է: Բայց եթե դուք իրականում փորձում եք ինչ-որ բան կառուցել այստեղ, ապա ես կառաջարկեի, որ չփորձեք արդյունահանել աղբյուրը և փոխարինել դրանք պատկերասրահ ստեղծելու համար: Փորձեք բոլոր պատկերները/տարրերը միանգամից հասցնել մոդալին: Այնուհետև սեղմեք փոխակերպեք/թարգմանեք դրանք աջից ձախ կամ ձախից աջ՝ օգտագործելով CSS3: Այդ կերպ դուք նույնպես կստանաք գեղեցիկ և արագ սահիչ: Դա իրականացնելու համար ձեզ հարկավոր է ավելի շատ CSS իմանալ, քան JavaScript/jQuery-ն:

Ավելի շատ գրադարաններ կան cycle2 ձեր բոլոր սլայդերի կարիքների համար: Օգտագործեք այն՝ իրերն ավելի արագ դարձնելու և բրաուզերի աջակցություն ստանալու համար: