Question

我的任务是创建4个滚动20张图片的按钮。这些图片目前标有usa1.jpg，一直到usa20.jpg。我们的目标是创建一个第一个/最后一个按钮，它将您带到第一个和最后一个图片，以及一个经典的下一个和上一个按钮来浏览图片。我的老师是老式的，这是第一个javascript类，所以如果你看到任何看起来很旧的代码，请记住教师要求我使用它，因为它显示而不是使用超出初级水平的任何东西;否则我会得到这个任务的停靠点。现在，当我拉起图像时，图像没有加载到网站上。任何其他提示或信息也将非常感激。

<html>
<head>
   <meta charset="utf-8">
   <link rel="stylesheet" type="text/css" href="styles/usa.css">
   <title>USA Tour</title>
</head>

<body>
<table>
    <thead>
    <tr>
        <th>Images From USA Tour 2007</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <td id="btns">
        <button type="button" id="first">&lt;=</button>
        <button type="button" id="previous">&lt;</button>
        <button type="button" id="next">&gt;</button>
        <button type="button" id="last">=&gt;</button>
        </td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
        <td id="usaimg"></td>
    </tr>
    </tbody>
</table>
<script type="text/javascript" src="scripts/usa.js"></script>
</body>
</html>

-----------------------------------------------------------------------


window.onload = function() {
    var loadFirstBtn = document.getElementById("first");
    var loadNextBtn = document.getElementById("next");
    var loadPrevBtn = document.getElementById("previous");
    var loadLastBtn = document.getElementById("last");
    var extension = ".jpg";
    var imgPath = "images/usa-";
    var images = [];

    function loadImages() {
        for (var i = 0; i < 20; i++) {
            images[i] = new Image();
            if () {
                images[i].src = imgPath + (i + 1) + extension;
            }                
            console.log(images[i].src);
        }
    }
    loadFirstBtn.onclick = function(){
        var tds = document.getElementsById("btns");
        var len = images.length;
        for (var i = 0) {
            tds[i].appendChild(images[i]);   
        }
    }
    loadNextBtn.onclick = function(){
        var tds = document.getElementsById("btns");
        var len = images.length;
        for (var i = 0; i++) {
            tds[i].appendChild(images[i]);
            images.sort(function(a, b) {
                return a - b;
            });   
        }
    }
    loadPrevBtn.onclick = function(){
        var tds = document.getElementsById("btns");
        var len = images.length;
        for (var i = 0; i--) {
            tds[i].appendChild(images[i]);
            images.sort(function(a, b) {
                return b - a;
            });   
        }
    }
    loadLastBtn.onclick = function(){
        var tds = document.getElementsById("btns");
        var len = images.length;
        for (var i = 20) {
            tds[i].appendChild(images[i]);   
        }
    }        
    loadImages();

}

使用数组的Javascript按钮

0 个答案: