初学者用javascript,幻灯片不会运行

时间:2014-01-24 03:18:22

标签: javascript html css slideshow

我按照简单的javascript幻灯片教程。它工作得很完美,我们将javascript权限放入内部的html文档中。当我尝试将代码链接到我创建的页面并尝试单击下一个或上一个页面时,该页面将仅使用第一个图像重新加载。有什么想法吗?

这是我的HTML代码

 <!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="stylesheetmusic.css"/>
    <script type="text/javascript" src="slidescript.js"></script>
    <title>New York Knicks</title>
</head>
<body>
    <div id="header">
        <p id="name">Nicholas Johnson</p>
        <a href="mailto:johnna@farmingdale.edu">
 <p id="email">johnna@farmingdale.edu</p></a>
    </div>
    <div class="left">
        <ul>
            <li><a href="aboutme.html">Home</a></li>
            <li><a href="sports.html">Sports</a></li>
            <li>Hobbies</li>
        </ul>
    </div>
    <div class="right">
        <h4>blink-182</h4>
        <h4>Hometown:</h4>
        <p>San Diego, CA</p>

        <h4>Record label:</h4>
        <p>Independent</p>
        <h4>Band Members:</h4>
            <ul>
                <li>Guitar/Vocal: Tom DeLonge</li>
                <li>Bass/Vocals: Mark Hoppus</li>
                <li>Drums: Travis Barker</li>
            </ul>

        <img src="tom.jpg" name="slideshow" />
        <table>
            <tr>
                        <td align="left"><a href="" onclick="return       change_image(-1)">Previous</a></td>
                <td align="right"><a href="" onclick="return change_image(1)">Next</a></td>
            </tr>
        </table>

        </div>
    <div id="footer">
        <p> 15 Baker lane, Levittown, New York 11756 | Tel: (555) 555-5555</p>
        </div>
    </body>
</html>

这是我的javascript文件

<script type="text/javascript">
        var Image = new Array("tom.jpg", "mark.jpg", "travis.jpg");
        var Image_Number = 0;
        var Image_Length = Image.length - 1;

        function change_image(num){
            Image_Number = Image_Number + num;

            if (Image_Number > Image_Length){
                    Image_Number = 0;
            }

            if (Image_Number < 0){
                    Image_Number = Image_Length;
            }

            document.slideshow.src= Image[Image_Number];
            return false;

        }

    </script>

2 个答案:

答案 0 :(得分:2)

您需要从JavaScript文件中删除脚本标记。您的javascript文件(slidescript.js)的完整文本应为:

    var Image = new Array("tom.jpg", "mark.jpg", "travis.jpg");
    var Image_Number = 0;
    var Image_Length = Image.length - 1;

    function change_image(num){
        Image_Number = Image_Number + num;

        if (Image_Number > Image_Length){
                Image_Number = 0;
        }

        if (Image_Number < 0){
                Image_Number = Image_Length;
        }

        document.slideshow.src= Image[Image_Number];
        return false;

    }

答案 1 :(得分:0)

将Javascript代码直接放入HTML文件对我有用。如果使用<script type = "text/javascript" src="slidescript.js">链接到Javascript文件,则Javascript文件不应包含标记。

从Javascript文件的开头和结尾删除这些标记,你应该好好去。