Javascript / HTML横幅不起作用

Question

我正在关注本教程（已删除链接，因为 SO 上不允许使用 YouTube 视频）。

我不明白为什么横幅不能按原样闪烁，我有 4 张图像我打算让它闪烁。

另外，如果有人确实解决了这个问题，我怎样才能使图像链接到另一个页面，例如，是否像在 HTML 代码中添加 <a href=.......> 一样简单？

HTML：

<script type="text/javascript" src:"jquery.js"></script>
<div id="banner">
    <img src="images/banner1.jpg" class="active" />
    <img src="images/banner4.jpg" />
    <img src="images/banner2.jpg" />
    <img src="images/banner3.jpg" />
</div>

javascript/jQuery

​​>

    $(document).ready(function () {
    setInterval(function () {
        //Get current active image
        var active = $('#banner .active');

        // If there is another image(object) left then make that image next
        // If not, go back to the first image of the banner div
        if (active.next().length > 0) var next = active.next();
        else var next = $('#banner img:first');

        //Get the next image ready by modifying the z-index
        next.css('z-index', '2');

        //Fade out the active image, then
        active.fadeOut(1000, function () {

        });
        //Move the active image to the back of the pile, show it and             remove     the active class
        active.css('z-index', '1').show().removeClass('active');
        //Make the next image the active one    
        next.css('z-index', '3').addClass('active');
    });

}, 3000);
}); 

CSS

#banner {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    height: 350px;
    width: 950px;
    margin-top: 10px;
}
#banner img {
    position:absolute;
    z-index:1;
}
#banner img.active {
    z-index:3;
}

Answer 1

所以首先你没有链接你的脚本。

你有：

<script type="text/javascript" src:"jquery.js"></script>

应该是：

<script type="text/javascript" src="jquery.js"></script>

正如您刚刚输入的jquery.js，这意味着如果您的主页（使用它的任何页面）在C:\Users\Me\Documents\Website 中，那么jquery.js 也需要在同一个文件夹中。

---

然后我们转到 jQuery，它一切正常，直到它结束。你用}, 3000);关闭它 但然后尝试使用}); 再次关闭它。缩进也暴露了它。

所以当我们修复它时，我们会得到这个DEMO HERE