Question

我目前正在通过helpdev this tutorial工作，但是遇到了一堵砖墙 - 我已经按照每个步骤进行操作，直到我可以告诉并让界面正常工作 - 但是当我运行页面图像没有改变，它只是停留在第一个页面上。

该视频已超过三年了，所以我猜测语法中的某些内容只需要更改 - 即使使用chrome dev工具我也无法弄明白。

感谢您的帮助。

这里是页面的html，css和js：

HTML：

<!DOCTYPE>
<html>
   <head>
      <title>Slider example.</title>
      <link rel="stylesheet" href="../css/slider.css">
   </head>
   <body>
      <div class="wrapper">
         <div id="slider">
            <img id="1" src="../images/tromso.jpg">
            <img id="2" src="../images/fjord.jpg">
            <img id="3" src="../images/tromso_aerial.jpg">
            <img id="4" src="../images/sognefjord.jpg">
         </div>

         <a href="#" class="left">Previous</a>
         <a href="#" class="right">Next</a>

      </div>

      <script src="../js/jquery.js"></script>
      <script src="../js/slider.js"></script>

   </body>
</html>

的CSS：

.wrapper {
   width: 600px;
   margin: 0 auto;
}

#slider {
   width: 600px;
   height: 400px;
   overflow: hidden;
   margin: 30px auto;
}

#slider > img {
   width: 600px;
   height: 600px;
   float: left;
   display: none;
}

a {
   padding: 5px 10px;
   background-color: #F0F0F0;
   margin-top: 30px;
   text-decoration: none;
   color: #666;
}

a.left {
   float: left;
}

a.right {
   float: right;
}

JS：

sliderInt = 1;
sliderNext = 2;

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

});

function startSlider(){
   count = $("#slider > img").length;

   loop = setInterval(function(){

      if(sliderNext > count){
         sliderNext = 1;
         sliderInt = 1;

      }

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

      sliderInt = sliderNext;
      sliderNext = sliderNext + 1;

   },3000);


}

Answer 1

此 $("slider > img").fadeOut(300);

应该是

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

您错过了#

前面的slider

同时删除您为loop =变量分配函数但从不执行它的代码loop。所以你需要的是运行它而不是分配它。删除分配将执行该代码块。

用jQuery创建滑块的问题

1 个答案: