JQuery图像滑块图像未显示_Jquery_Image

JQuery图像滑块图像未显示

jquery image

JQuery图像滑块图像未显示,jquery,image,Jquery,Image,我正在尝试使用JQuery创建一个图像滑块（我被告知这是实现这一点的“正确”方法）。我在项目根文件夹下有下面的图像代码，但它没有显示？不确定为什么 <head runat="server"> <title></title> <asp:ContentPlaceHolder ID="head" runat="server"> <script src="../App_Themes/Project/jquery-1.8.2.min.js" t

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


var imgs=[
'myImage.png']；
var cnt=imgs.长度；
$（函数（）{
设置间隔（滑块，3000）；
});
函数滑块（）{
$（“#图像幻灯片”）。淡出（“慢”，函数（）{
$（this.attr（'src'，imgs[（imgs.length++）%cnt]）.fadeIn（“slow”）；
});
}

此外，我希望使用箭头来导航每个图像-我是否仍在正确的路径上？

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

编辑：至于箭头，我认为最好在单独的问题中提出，并提供更多细节

EDIT2:JSFIDLE示例：

您的javascript在页面加载之前执行，因此它所附加的元素尚不存在。这是一个很好的函数，可用于将javascript的执行延迟到页面加载完成之后

编辑：至于箭头，我认为最好在单独的问题中提出，并提供更多细节

EDIT2:JSFIDLE示例：

我现在的代码是：$（document）.ready（函数（）{//Handler for.ready（）调用.var imgs=['djq.png']；var cnt=imgs.length；$（函数（）{setInterval（Slider，3000）；}）；函数Slider（）{$（“#imageSlide”）.fadeOut（“slow”，function（）{$（this.attr（'src'，imgs[（imgs.length++）%cnt]）.fadeIn（“slow”）；}}}）；但仍然不起作用？@Jupiter我在我的答案中添加了你的代码，但做了一些更改，主要是留在.ready中的随机函数（）（function（））。您的代码实际上没有错误，因此我认为您的图像源或var-imgs可能会出错。请查看JSFIDLE示例。我现在的代码是：$（document）.ready（function（）{//Handler for.ready（）called.var-imgs=['djq.png']；var cnt=imgs.length；$（函数（）{setInterval（Slider，3000）；}）；函数Slider（）{$（'#imageSlide'）.fadeOut（“slow”，函数（）{$（this）.attr（'src'，imgs[（imgs.length++）%cnt]）.fadeIn（“slow”）；}）；但仍然不起作用？@Jupiter我在回答中添加了您的代码，但做了一些更改，主要是在.ready（function（））中保留了随机函数（）。您的代码实际上可以正常工作，因此我认为您的图像源或var imgs可能会出错。请查看JSFIDLE示例。

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