如何实现<img>元素在表格外围单元格间顺时针移动及重置功能？

Got it, let's build this table-based image navigator exactly as you described. Below is a complete, working implementation with clear explanations:

HTML Structure #

We'll start with a simple table, plus control buttons for "Step" and "Reset":

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table Image Navigator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="controls">
        <button id="stepBtn">Step</button>
        <button id="resetBtn">Reset</button>
    </div>
    <table id="gridTable">
        <tr>
            <td><p>1</p></td>
            <td><p>2</p></td>
            <td><p>3</p></td>
            <td><p>4</p></td>
        </tr>
        <tr>
            <td><p>5</p></td>
            <td><p>6</p></td>
            <td><p>7</p></td>
            <td><p>8</p></td>
        </tr>
        <tr>
            <td><p>9</p></td>
            <td><p>10</p></td>
            <td><p>11</p></td>
            <td><p>12</p></td>
        </tr>
        <tr>
            <td><p>13</p></td>
            <td><p>14</p></td>
            <td><p>15</p></td>
            <td><p>16</p></td>
        </tr>
    </table>
    <script src="script.js"></script>
</body>
</html>

Basic CSS Styling #

Add some minimal styling to make the table and buttons look clean:

#gridTable {
    border-collapse: collapse;
    margin: 20px 0;
}

#gridTable td {
    border: 1px solid #333;
    width: 60px;
    height: 60px;
    text-align: center;
    vertical-align: middle;
}

#gridTable p {
    margin: 0;
    font-size: 18px;
}

.custom-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* Replace with your image styles or use background-color as placeholder */
    background-color: #4CAF50;
}

.controls button {
    padding: 8px 16px;
    font-size: 16px;
    margin-right: 10px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    background-color: #2196F3;
    color: white;
}

.controls button:hover {
    opacity: 0.9;
}

JavaScript Logic #

This is where the core behavior lives—tracking the image position, handling movement, and resetting the state:

// Grab DOM elements
const stepBtn = document.getElementById('stepBtn');
const resetBtn = document.getElementById('resetBtn');
const table = document.getElementById('gridTable');
const rows = table.querySelectorAll('tr');

// Initialize tracking variables
let currentPathIndex = 0;
let isFirstClick = true;

// Create our custom image element (replace src with your actual image URL)
const customImg = document.createElement('img');
customImg.className = 'custom-img';
customImg.src = 'https://via.placeholder.com/40'; // Swap this for your image

// Define the clockwise perimeter path (row, column indices)
// Adjust this array if you change the table size!
const perimeterPath = [
    [0,0], [0,1], [0,2], [0,3], // Top row left to right
    [1,3], [2,3], [3,3],        // Right column top to bottom
    [3,2], [3,1], [3,0],        // Bottom row right to left
    [2,0], [1,0]                // Left column bottom to top
];

// Save original cell contents so we can restore them later
const originalCellContents = [];
rows.forEach((row, rowIdx) => {
    const cells = row.querySelectorAll('td');
    originalCellContents[rowIdx] = [];
    cells.forEach((cell, colIdx) => {
        originalCellContents[rowIdx][colIdx] = cell.innerHTML;
    });
});

// Handle Step button clicks
stepBtn.addEventListener('click', () => {
    if (isFirstClick) {
        // First click: replace top-left cell's <p> with image
        const firstCell = rows[0].querySelector('td');
        firstCell.innerHTML = '';
        firstCell.appendChild(customImg);
        isFirstClick = false;
        return;
    }

    // Restore the current cell to its original content
    const [currentRow, currentCol] = perimeterPath[currentPathIndex];
    rows[currentRow].querySelectorAll('td')[currentCol].innerHTML = originalCellContents[currentRow][currentCol];

    // Move to the next position in the perimeter path (loop back if needed)
    currentPathIndex = (currentPathIndex + 1) % perimeterPath.length;
    const [nextRow, nextCol] = perimeterPath[currentPathIndex];
    const nextCell = rows[nextRow].querySelectorAll('td')[nextCol];
    
    // Place the image in the new cell
    nextCell.innerHTML = '';
    nextCell.appendChild(customImg);
});

// Handle Reset button clicks
resetBtn.addEventListener('click', () => {
    // Remove the image from the DOM if it exists
    if (customImg.parentNode) {
        customImg.parentNode.removeChild(customImg);
    }

    // Restore all cells to their initial state
    rows.forEach((row, rowIdx) => {
        const cells = row.querySelectorAll('td');
        cells.forEach((cell, colIdx) => {
            cell.innerHTML = originalCellContents[rowIdx][colIdx];
        });
    });

    // Reset tracking variables to start fresh
    currentPathIndex = 0;
    isFirstClick = true;
});

Key Logic Breakdown #

Let’s walk through the important parts so you can tweak this to fit your needs:

• Original Content Storage: We save every cell’s initial HTML on page load. This ensures we can perfectly restore cells when the image moves away.
• First Click Handling: The first "Step" click skips movement and just places the image in the top-left cell—we flip a flag to enable movement for subsequent clicks.
• Perimeter Path: We defined a hardcoded array of row/column indices for all perimeter cells in clockwise order. This makes movement logic simple: we just cycle through this array.
• Movement Cycle: For each non-first click, we first restore the current cell’s original content, then move the image to the next cell in the path.
• Reset Function: This clears the image, restores all cells to their starting state, and resets our tracking variables so we can begin again.

You can customize this by:

• Replacing the src of customImg with your actual image URL
• Adjusting the table size (just update the perimeterPath array to match the new table’s perimeter cells)
• Tweaking the CSS to match your design preferences

内容的提问来源于stack exchange，提问作者newbs