html没有连接到js答案

【问题标题】：Html not connecting to jshtml没有连接到js
【发布时间】：2014-01-29 22:32:39
【问题描述】：

所以我正在尝试使用 js 制作幻灯片，我已经寻求帮助并且它在 JSFiddle 中工作，但它在我的本地环境中不起作用，所以我想知道我是否有一些有人可以帮助我查看的措辞或错误之处。

HTML5

<!DOCTYPE html>
<html>

<head>
    <title>slider</title>

    <link rel="stylesheet" href="style.css" type="text/css"/>

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta name="viewport" content="with=device-width, initial-scale=1.0">

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script type="text/javascript" src="slider.js"></script>
</head>

<body onload="slider()">

    <div class="slider">
        <img id="1" src="slide_image1.jpg" alt="TV Deals"/>
        <img id="2" src="slide_image2.jpg" alt="Furniture Deals"/>
        <img id="3" src="slide_image3.jpg" alt="Electronic Deals"/>
    </div>

</body>
</html>

CSS3

.slider {
    width: 990px;
    height: 270px;
    overflow: hidden;
    margin: 30px auto;
    background-image: url('ajax-loader.gif');
    background-repeat: no-repeat;
    background-position: center;
}

.slider img{
    border: 0;
    display: none;
}

JavaScript

$(document).ready(function () {
    slider();
});

function slider(){
    var count = 1;

    $('#1').show();

    (function slide(){
        $('.slider img').hide();

        if (count > 3) {count = 1;} // makes this a loop

        $('#'+count).fadeIn('slow');
        count += 1;

        setTimeout(function () {
            slide();
        }, 5000);
    })();
}

我的“onload”命令正确吗？我正在使用 Web Expression 作为设计师，实际上我通过每个图像的 url 路径进入并选择了图像，所以我知道路径是正确的（对 js 做了同样的事情）。 JavaScript 本身被称为“slider.js”，这会影响我的代码吗？这是我第一次尝试做这些，所以我不知道是什么导致它出错。

【问题讨论】：

标签： javascript jquery html slider slideshow

【解决方案1】：

当您说本地环境时，它是否在file:// 协议下运行在您的计算机上？（即，当您查看它时，它是 file://C:\My\Files\index.html 之类的东西）还是运行在 http:// 协议上的服务器？

如果是前者，则需要将脚本 srcs 从// 显式更改为http://。 // 的意思是“使用页面使用的任何协议”，这意味着它会尝试 file://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js，这显然不存在。

这是唯一让我感到不快的事情，并且是在本地工作时常见的错误。

【讨论】：

如果是这样，将两个 googleapis.com 脚本 src 中的 // 更改为“http://”应该可以解决问题。
太棒了，它现在出现了，但现在它只是没有滑动。图像闪烁，然后闪烁并停留，然后闪烁，然后再次进入。
更仔细地查看您的代码，我认为您正在加倍关注它，因此它被双重超时。 $(document).ready 位与 onload 基本相同，实际上是首选方法，因此完全终止您的 onload="slider()" 调用。
好吧，酷，现在它不是双闪了，但它仍然不会像它应该的那样随着新的从右边进来的滑到左边。
您发布的 JSFiddle 也不会滑落。它显示第一个，然后迅速消失，另一个淡入。听起来您描述的行为正是我在 JSFiddle 中看到的。