Question

似乎我出于某种原因无法滑动滑块...

以下是 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

将代码中的所有$替换为#，将$("$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>

希望这有帮助。

段

.grid--full {
   position: relative;
   height: 100% !important;
}

pool

Answer 2

试试这个：

sliderInt = 1;
sliderNext = 1;

$(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("Count "+count+" / slidernext ="+sliderNext);
    }

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

    sliderInt = sliderNext;
    sliderNext= sliderNext+1;

   }, 3000)
}

JQuery Image滑块不滑动

2 个答案:

段