图片未显示

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 ：

您的幻灯片工作室

您只需要确保：

图像的路径正确
您正在加载jQuery

希望这可以帮助！

Answer 2

我相信您错过了在HTML中包含Jquery库的功能。

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

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

为了更好地理解，请在这里查看 ...

图片未显示

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-10-12 14:26:45

解决方案2
0 2014-10-12 14:47:13

图片未显示

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-10-12 14:26:45

解决方案2 0 2014-10-12 14:47:13

解决方案1
2 已采纳 2014-10-12 14:26:45

解决方案2
0 2014-10-12 14:47:13