Question

我在谷歌搜索一个简单的旋转木马示例，我遇到了一个，它的链接是：

http://jsfiddle.net/paulmason411/TZy7A/2/

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var $slider = $('.slider'); // class or id of carousel slider
var $slide = 'li'; // could also use 'img' if you're not using a ul
var $transition_time = 1000; // 1 second
var $time_between_slides = 4000; // 4 seconds

function slides(){
  return $slider.find($slide);
}

slides().fadeOut();

// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);

// auto scroll 
$interval = setInterval(
    function(){
      var $i = $slider.find($slide + '.active').index();

      slides().eq($i).removeClass('active');
      slides().eq($i).fadeOut($transition_time);

      if (slides().length == $i + 1) $i = -1; // loop to start

      slides().eq($i + 1).fadeIn($transition_time);
      slides().eq($i + 1).addClass('active');
    }
    , $transition_time +  $time_between_slides 
);
</script>



<style>

.slider {
  margin: 10px 0;
  width: 580px; /* Update to your slider width */
  height: 250px; /* Update to your slider height */
  position: relative;
  overflow: hidden;
}

.slider li {
  display: none;
  position: absolute; 
  top: 0; 
  left: 0; 
}
</style>



</head>





<body>


<ul class="slider">
  <li>
    <img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->
  </li>
  <li>
    <img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->
  </li>
  <li>
    <img src="http://lorempixel.com/580/250/nature/3"> <!-- random image -->
  </li>
  <li>
    <img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->
  </li>
</ul>


</body>
</html>

但是我创建了一个扩展名为.html的记事本文件，并在那里添加了所有这些代码，并试图在浏览器中打开它并且不起作用。能不能让我知道为什么它对我不起作用。

这是代码，这是您在上述链接中看到的完整副本。

Answer 1

您的问题是您没有准备好的功能。在你可以进行任何jQuery调用之前，你需要在那里。

    <!DOCTYPE html>
    <html>
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>

    $(function(){
    var $slider = $('.slider'); // class or id of carousel slider
    var $slide = 'li'; // could also use 'img' if you're not using a ul
    var $transition_time = 1000; // 1 second
    var $time_between_slides = 4000; // 4 seconds

    function slides(){
      return $slider.find($slide);
    }

    slides().fadeOut();

    // set active classes
    slides().first().addClass('active');
    slides().first().fadeIn($transition_time);

    // auto scroll 
    $interval = setInterval(
        function(){
          var $i = $slider.find($slide + '.active').index();

          slides().eq($i).removeClass('active');
          slides().eq($i).fadeOut($transition_time);

          if (slides().length == $i + 1) $i = -1; // loop to start

          slides().eq($i + 1).fadeIn($transition_time);
          slides().eq($i + 1).addClass('active');
        }
        , $transition_time +  $time_between_slides 
    );
}
    </script>



    <style>

    .slider {
      margin: 10px 0;
      width: 580px; /* Update to your slider width */
      height: 250px; /* Update to your slider height */
      position: relative;
      overflow: hidden;
    }

    .slider li {
      display: none;
      position: absolute; 
      top: 0; 
      left: 0; 
    }
    </style>



    </head>





    <body>


    <ul class="slider">
      <li>
        <img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->
      </li>
      <li>
        <img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->
      </li>
      <li>
        <img src="http://lorempixel.com/580/250/nature/3"> <!-- random image -->
      </li>
      <li>
        <img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->
      </li>
    </ul>


    </body>
    </html>

关于jsfiddle的注意事项是注意在框架和扩展中选择了“onDomReady” - 小提琴会自动将代码包装在文档中。

干杯！

Answer 2

您只需要将代码置于$(document).ready()内。这样可以防止脚本在文档完全加载之前运行。

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

$(document).ready(function() {
  var $slider = $('.slider'); // class or id of carousel slider
  var $slide = 'li'; // could also use 'img' if you're not using a ul
  var $transition_time = 1000; // 1 second
  var $time_between_slides = 4000; // 4 seconds

  function slides(){
    return $slider.find($slide);
  }

  slides().fadeOut();

  // set active classes
  slides().first().addClass('active');
  slides().first().fadeIn($transition_time);

  // auto scroll 
  $interval = setInterval(
    function(){
      var $i = $slider.find($slide + '.active').index();

      slides().eq($i).removeClass('active');
      slides().eq($i).fadeOut($transition_time);

      if (slides().length == $i + 1) $i = -1; // loop to start

      slides().eq($i + 1).fadeIn($transition_time);
      slides().eq($i + 1).addClass('active');
    }
    , $transition_time +  $time_between_slides 
  );
});
</script>

<style>

.slider {
  margin: 10px 0;
  width: 580px; /* Update to your slider width */
  height: 250px; /* Update to your slider height */
  position: relative;
  overflow: hidden;
}

.slider li {
  display: none;
  position: absolute; 
  top: 0; 
  left: 0; 
}
</style>



</head>





<body>


<ul class="slider">
  <li>
    <img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->
  </li>
  <li>
    <img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->
  </li>
  <li>
    <img src="http://lorempixel.com/580/250/nature/3"> <!-- random image -->
  </li>
  <li>
    <img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->
  </li>
</ul>


</body>
</html>

来自Google的简单轮播示例

2 个答案: