javascript - JQuery 图像 slider 不滑动

Question

似乎由于某种原因我无法让我的 slider 滑动...

这是HTML:

<div id="slider"><!--THE WHOLE DIV WITH TWO IMAGES AS EXAMPLE-->
<img src="1.jpg" id="1" />
<img src="2.jpg" id="2" />
</div>

这是 CSS:

#slider{
width: 1200px;
height: 400px;
}
#slider>img{
width: 1200px;
height: 400px;
position: absolute;
top: 50px;
left: 50px;
display: none
}

这是Javascript:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">

sliderInt = 1;
sliderNext = 2;

$(document).ready(function(){
$("#slider>Img#1").fadeIn(300);
startslider();
});

function startslider(){
count = $("#slider>Img").size();

loop = setInterval(function(){

    if(sliderNext > count){
    sliderNext = 1;
    sliderInt = 1;
    }
    else{
    document.write("Error!");
    }

    $("#slider>Img").fadeOut(300);
    $("$slider>Img#" + sliderNext).fadeIn(300);

    sliderInt = sliderNext;
    sliderNext= sliderNext+1;

}, 3000)
}

</script>

请告诉我我在哪里犯了错误，这样我可以从中吸取教训，因为我仍然认为自己是 JS/JQuery 的初学者，并且想从我的错误中吸取教训以提高我的技能。

谢谢!

Answer 1

将代码中的所有 Img 替换为 img 并将美元符号 $ 替换为 # in:

$("$slider>Img#" + sliderNext).fadeIn(300);
___^_______^

应该是:

$("#slider>img#" + sliderNext).fadeIn(300);

希望这对您有所帮助。

---

片段

sliderInt = 1;
sliderNext = 2;

$(document).ready(function(){
  $("#slider>img#1").fadeIn(300);
  startslider();
});

function startslider(){
  count = $("#slider>img").size();

  loop = setInterval(function(){

    if(sliderNext > count){
      sliderNext = 1;
      sliderInt = 1;
    }
    else{
      console.log("Error!");
    }

    $("#slider>img").fadeOut(300);
    $("#slider>img#" + sliderNext).fadeIn(300);

    sliderInt = sliderNext;
    sliderNext= sliderNext+1;

  }, 3000)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider"><!--THE WHOLE DIV WITH TWO IMAGES AS EXAMPLE-->
  <img src="http://www.menucool.com/slider/prod/image-slider-5.jpg" id="1" />
  <img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" id="2" />
</div>