1

我正在尝试使用 JQuery 创建一个图像滑块（我被告知这是实现此目的的“正确”方法。”我在项目根文件夹下有以下带有图像的代码，但它没有显示？不确定为什么？

<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
    <script src="../App_Themes/Project/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var imgs = [
    'myImage.png'];
        var cnt = imgs.length;

        $(function () {
            setInterval(Slider, 3000);
        });

        function Slider() {
            $('#imageSlide').fadeOut("slow", function () {
                $(this).attr('src', imgs[(imgs.length++) % cnt]).fadeIn("slow");
            });
        }
    </script>
</asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <img id="imageSlide" alt="" src="" />
    </div>
    <asp:ContentPlaceHolder ID="Content" runat="server">
    </asp:ContentPlaceHolder>
    </form>
</body>
</html>

此外，我希望箭头允许导航每个图像 - 我仍然在正确的路径上吗？

4

1 回答 1

1

您的 javascript 在页面加载之前执行，因此它所附加的元素尚不存在。$(document).ready()是一个很好的函数，用于延迟 javascript 的执行，直到页面完成加载。

编辑：关于箭头，我认为最好在一个单独的问题中提出，并提供更多详细信息。

EDIT2：JsFiddle 示例：http: //jsfiddle.net/nTCJp/

    $(document).ready(function() {
    // Handler for .ready() called. 
    var imgs = ['http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif'];
    var cnt = imgs.length;
    setInterval(Slider, 3000);

    function Slider() {
        $('#imageSlide').fadeOut("slow", function() {
            $(this).attr('src', imgs[(imgs.length++) % cnt]).fadeIn("slow");
        });
    }
});
于 2012-11-16T18:38:07.753 回答