Написание картинок-слайдеров в javascript - PullRequest
Новая
       0

Написание картинок-слайдеров в javascript

0 голосов
/ 15 марта 2020

Я пишу слайд-игру с использованием JavaScript, HTML и CSS. Я сделал 3 * 3, который работал нормально, но для моих 4 * 4 фрагменты изображения вообще не отображаются. Это часть кода HTML, касающаяся головоломки, пример того, как я сделал с CSS, и мой JS. Моя картинка уже разбита на части, а CSS в основном для прикрепления каждой к соответствующей части. Я знаю, что мой HTML читает JS, потому что я реализовал функцию, просто чтобы посмотреть, будет ли она читать, и она это сделала. Это не показывает картину головоломки, количество шагов и т.д. c.

HTML

<div class="text-center" style="padding-top:50px">
        <h2 id="stepCounter"></h2>
        <div id="table" class="text-center" style="display: table">
            <div id="row1" style="display: table-row;">
                <div id="book11" class="book1" style="display: table-cell;" onclick="selectBook(1,1)"></div>
                <div id="book12" class="book2" style="display: table-cell;" onclick="selectBook(1,2)"></div>
                <div id="book13" class="book3" style="display: table-cell;" onclick="selectBook(1,3)"></div>
                <div id="book14" class="book4" style="display: table-cell;" onclick="selectBook(1,4)"></div>
            </div>
            <div id="row2" style="display: table-row;">
                <div id="book21" class="book5" style="display: table-cell;" onclick="selectBook(2,1)"></div>
                <div id="book22" class="book6" style="display: table-cell;" onclick="selectBook(2,2)"></div>
                <div id="book23" class="book7" style="display: table-cell;" onclick="selectBook(2,3)"></div>
                <div id="book24" class="book8" style="display: table-cell;" onclick="selectBook(2,4)"></div>
            </div>
            <div id="row3" style="display: table-row;">
                <div id="book31" class="book9"  style="display: table-cell;" onclick="selectBook(3,1)"></div>
                <div id="book32" class="book10" style="display: table-cell;" onclick="selectBook(3,2)"></div>
                <div id="book33" class="book11" style="display: table-cell;" onclick="selectBook(3,3)"></div>
                <div id="book34" class="book12" style="display: table-cell;" onclick="selectBook(3,4)"></div>
            </div>
            <div id="row4" style="display: table-row;">
                <div id="book41" class="book13" style="display: table-cell;" onclick="selectBook(4,1)"></div>
                <div id="book42" class="book14" style="display: table-cell;" onclick="selectBook(4,2)"></div>
                <div id="book43" class="book15" style="display: table-cell;" onclick="selectBook(4,3)"></div>
                <div id="book44" class="book16" style="display: table-cell;" onclick="selectBook(4,4)"></div>
            </div>
        </div>
    </div>

CSS

.book1 {
    display: table-cell;
    width: 90px;
    height: 90px;
    background: #F5EDDA;
}
.book2 {
    display: table-cell;
    width: 90px;
    height: 90px;
    background: url(Pictures/book2/book22.jpg);
    background-size: contain;
}
.book3 {
    display: table-cell;
    width: 90px;
    height: 90px;
    background: url(Pictures/book2/book23.jpg);
    background-size: contain;
}
.book4 {
    display: table-cell;
    width: 90px;
    height: 90px;
    background: url(Pictures/book2/book24.jpg);
    background-size: contain;
}
.book5 {
    display: table-cell;
    width: 90px;
    height: 90px;
    background: url(Pictures/book2/book25.jpg);
    background-size: contain;
}
.book6 {
    display: table-cell;
    width: 90px;
    height: 90px;
    background: url(Pictures/book2/book26.jpg);
    background-size: contain;
}

JS

var stepCount = 0;

function shuffle() {
    for (var row = 1; row <= 4; row++) {
        for (var col = 1; col <= 4; col++) {
            var row2 = Math.floor(Math.random() * 4 + 1);
            var col2 = Math.floor(Math.random() * 4 + 1);
            swapBook("book" + row + col, "book" + row2 + col2);
        }
    }
    stepCount = 0;
    document.getElementById('stepCounter').innerHTML = "<h2>Steps: </h2>" + stepCount;
}

function selectBook(row, col) {
    var book = document.getElementById("book" + row + col);
    var blankBook = book.className;

    if (blankBook != "book1") {
        //Checking if white tile on the right
        if (col < 4) {
            if (document.getElementById("book" + row + (col + 1)).className == "book1") {
                swapBook("book" + row + col, "book" + row + (col + 1));
                stepCount++;
                document.getElementById('stepCounter').innerHTML = "<h2>Steps: </h2>" + stepCount;
                return;
            }
        }
        //Checking if white tile on the left
        if (col > 1) {
            if (document.getElementById("book" + row + (col - 1)).className == "book1") {
                swapBook("book" + row + col, "book" + row + (col - 1));
                stepCount++;
                document.getElementById('stepCounter').innerHTML = "<h2>Steps: </h2>" + stepCount;
                return;
            }
        }
        //Checking if white tile is above
        if (row > 1) {
            if (document.getElementById("book" + (row - 1) + col).className == "book1") {
                swapBook("book" + row + col, "book" + (row - 1) + col);
                stepCount++;
                document.getElementById('stepCounter').innerHTML = "<h2>Steps: </h2>" + stepCount;
                return;
            }
        }
        //Checking if white tile is below
        if (row < 4) {
            if (document.getElementById("book" + (row + 1) + col).className == "book1") {
                swapBook("book" + row + col, "book" + (row + 1) + col);
                stepCount++;
                document.getElementById('stepCounter').innerHTML = "<h2>Steps: </h2>" + stepCount;
                return;
            }
        }
    }
}

function swapBook(book1, book2) {
    var temp = document.getElementById(book1).className;
    document.getElementById(book1).className = document.getElementById(book2).className;
    document.getElementById(book2).className = temp;
}

Это пример моего 3 * 3 HTML, который работает: 

    <div class="text-center" style="padding-top:50px">
        <h2 id="stepCounter"></h2>
        <center>
            <div id="table" class="text-center" style="display: table">
                <div id="row1" style="display: table-row;">
                    <div id="piece11" class="piece1" style="display: table-cell;" onclick="selectPiece(1,1)"></div>
                    <div id="piece12" class="piece2" style="display: table-cell;" onclick="selectPiece(1,2)"></div>
                    <div id="piece13" class="piece3" style="display: table-cell;" onclick="selectPiece(1,3)"></div>
                </div>
                <div id="row2" style="display: table-row;">
                    <div id="piece21" class="piece4" style="display: table-cell;" onclick="selectPiece(2,1)"></div>
                    <div id="piece22" class="piece5" style="display: table-cell;" onclick="selectPiece(2,2)"></div>
                    <div id="piece23" class="piece6" style="display: table-cell;" onclick="selectPiece(2,3)"></div>
                </div>
                <div id="row3" style="display: table-row;">
                    <div id="piece31" class="piece7" style="display: table-cell;" onclick="selectPiece(3,1)"></div>
                    <div id="piece32" class="piece8" style="display: table-cell;" onclick="selectPiece(3,2)"></div>
                    <div id="piece33" class="piece9" style="display: table-cell;" onclick="selectPiece(3,3)"></div>
                </div>
            </div>
        </center>
    </div>

3 * 3 Работает CSS

.piece1 {
    display: table-cell;
    width: 120px;
    height: 120px;
    background: #F5EDDA;
}
.piece2 {
    display: table-cell;
    width: 120px;
    height: 120px;
    background: url(Pictures/flower/flower2.jpg);
    background-size: contain;
}
.piece3 {
    display: table-cell;
    width: 120px;
    height: 120px;
    background: url(Pictures/flower/flower3.jpg);
    background-size:contain;
}
.piece4 {
    display: table-cell;
    width: 120px;
    height: 120px;
    background: url(Pictures/flower/flower4.jpg);
    background-size: contain;
}

1 Ответ

0 голосов
/ 16 марта 2020

В 4 * 4 CSS вы берете все изображения из:

Картинки / book2 /

Тогда как в ваших 3 * 3 вы берете изображения from:

Pictures / flower /

Возможно, вы получаете файлы из неправильных папок?

Если нет, проверьте имена файлов и посмотрите если они совпадают.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...