Question

所以我正在尝试使用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”，这会影响我的代码吗？这是我第一次尝试这样做，所以我不知道是什么导致它出错。

Answer 1

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

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

这是唯一让我跳出来的东西，在本地工作时是一个常见的错误。

Html没有连接到js

1 个答案: