Question

我正在尝试使用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>

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

Answer 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");
        });
    }
});

JQuery Image Slider图像没有显示

1 个答案: