幻灯片的第一次运行时图片迷失了

Question

所以我制作了一个幻灯片，通过按下按钮和定时器来改变图片和文字。由于某种原因，图片没有显示在幻灯片的第一个循环上，而只是从第二个不显示按钮而不是定时器。 该网站是音乐主题和学校项目。

PS。我不知道为什么JS / Jquery不读取html文件中的id不知道我是否需要添加任何内容但是如果你知道它会有用但不是非常重要

编辑：

不确定为什么，但是当我在JSFIDDLE上使用代码时，我唯一的问题是更改图片时的跳动文本，我也在文件上。如果我使用的是rtl类型的不同文本语言可以将其破坏吗？

HTML

        $('#SlideShow img').css({
            width: screen.width * .4,
            left: screen.width * .1

        });
        $('#NextButton img').css({
            width: screen.width * 0.04,
            left: screen.width * .1
        });
        $('#NextButton').css({
            left: screen.width * .5,
            top:screen.height * .2
        });
        $('#BackButton').css({
            left: screen.width * .06,
            top: screen.height * .2
        });
        $("#BackButton img").css({
            width: screen.width * 0.04,
            right: screen.width * .1
        });
        $("#ShortText").css({
            width: screen.width * .45
        })
        //Picture change code Auto+Buttons
        setInterval("Change()", 40000)
        function Change() {
            $('#SlideShow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#SlideShow');
            $('#ShortText div:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#ShortText');

        }

        $(function() {
            $('#SlideShow img:gt(0)').hide();//Hides all the pictures accpet the first one (img:gt refers to all the img inside the id and the aplly it to all the next index item after the number in the ())
            $('#ShortText div:gt(0)').hide();
    
        
            $('#BackButton').click(function () {
                $('#SlideShow img:first').fadeOut(1000);//Hide the first inexed img
                $('#SlideShow img:last').fadeIn(1000).prependTo('#SlideShow');//Show the last indexed img .prependTo insert the first element to the last one
                $("#ShortText div:first").fadeOut(1000);
                $("#ShortText div:last").fadeIn(1000).prependTo("#ShortText");
           
            });

            $('#NextButton').click(function () {
                $('#SlideShow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#SlideShow');//.appendTo= insert the object as the last element .next=Aplly to the next elemnt .end= Stop all the code until now in the chain.
                $('#ShortText div:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#ShortText');
               
            });
        });

#SlideShow img {
    position:absolute;
    }
    #NextButton{
    position:absolute;
    }
    #BackButton{
    position:absolute;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id ="SlideShow">
        <img src="Pics/Classic%20Music.jpg" />
        <a href="Rock.aspx"><img src="Pics/RockNRoll.jpg" /></a>
        <img src="Pics/Metal.jpg" />
      
    </div>
      <div id="ShortText">
            <div><h1>First header</h1>
             <p>First text</p>
            </div>
          <div>
              <a href="Rock.aspx"><h1>Second Header</h1></a>
              <p>Second Text</p>
          </div>
          <div>
              <h1>Third header</h1>
              <p>Third text</p>
          </div>
      </div>

JSFIDDLE