Question

你能帮我解决这个问题吗？由于我是使用javascript的新手，我已经复制了某个网站的代码（可以免费复制代码。我很钦佩编码器。）。这项任务将于明天到期，因此我没有时间对此进行研究。你能帮我么。顺便说一句，这是我第一次发帖。请温柔地回答。提前谢谢。

这是HTML

<html>
    <head>
        <title>Sample</title>
        <link rel="stylesheet" type="text/css" href="sample.css">
    </head>
    <body>
    <script type="text/javascript" src="sample.js"></script>
    <div id="container">
        <h1>A really simple slideshow</h1>
        <ul class="slider">
        <li><img src="images/garmin1.jpg" height="337" width="600" /></li>
        <li><img src="images/garmin2.jpg" height="337" width="600" /></li>
        <li><img src="images/garmin1.jpg" height="337" width="600" /></li></ul>
        <p>I went to see <a href="http://trailers.apple.com/trailers/wb/gravity/" title="           Watch the Gravity trailer">Gravity</a> today. It was amazeballs.</p>

</div>
    </body>
</html>

这是CSS

body {
  font: 1em/125% tahoma, sans-serif;
  background:#111;
  color:#c8c8c8;
}

#container {
  width:600px;
  padding:20px;
  margin:0 auto;
}

h1 {
  font-size:2em;
  padding-bottom:.5em;
  border-bottom:1px solid #cecece;
}

h1, p {
  margin: .8em 0;
}

a {
  text-decoration:none;
  font-style:italic;
  color:#cecece;
  transition:all .5s;
}

a:hover {
  color:#eeeeee;
}

.slider {
  position:relative;
  height:337px;
  overflow:hidden;
}

.slider li {
  display:none;
  position:absolute;
  top:0;
  left:0;
}

这是javascript

$(function(){
  var $slider = $('.slider');
  var $slide = 'li';
  var $delayTime = 1000;//fade in time
  var $transitionTime = 3000;

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

  Slides().fadeOut();

  Slides().first().addClass('active').fadeIn();

  //Auto scroll
  $interval = setInterval(function(){
    var $i = $slider.find($slide + '.active').index();
    Slides().eq($i)
      .removeClass('active')
      .fadeOut($transitionTime);

    if(Slides().length == $i + 1) {
      $i=-1; 
    }

    Slides().eq($i + 1)
      .fadeIn($transitionTime)
      .addClass('active');

  }, $transitionTime + $delayTime);


});

Answer 1

我已经测试了你的代码，结果很好。这是我的testing fiddle：

YOUR SLIDESHOW FIDDLE

你只需要确保：

图片的路径正确
您正在加载jquery

希望这有帮助！

Answer 2

我相信你错过了在你的HTML中包含Jquery库。

只需将以下行添加到HTML的<head></head>

即可

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

为了更好地理解，请检查here ...

图像未显示

2 个答案: