Codecademy flipboard代码无法在我的计算机上运行

时间：2014-12-17 21:20:01

标签： javascript html css flipboard

我浏览了Codecademy flipboard教程，基本上只是向您展示如何将.js文件放在一起用于旋转木马。我从网站上获取了代码并在我的计算机上创建了文件。

我将它们作为单独的文件保存在我的计算机上的一个文件夹中。我已经尝试将文件指向我从js网站下载的js文件（我放在同一个文件夹中）并且我尝试使用Codecademy提供的网站作为源代码，所以我不认为＆＃ 39;这个问题。我将每个文件分别保存为app.js，index.html和style.css。

当我运行它时，看起来应该如此，但旋转木马不起作用。但是，如果我在Codecademy上运行它，它运行得很好。是什么赋予了？我只是试图完全理解旋转木马以及.js .html和.css之间的互动我也试图用旋转木马建立我自己的简历类型网站，但我不能这样做直到我完全理解这些部分。 Codecademy在我眼里做不到的事。

app.js 

    var main = function() {
      $('.dropdown-toggle').click(function() {
        $('.dropdown-menu').toggle();
      });

      $('.arrow-next').click(function() {
        var currentSlide = $('.active-slide');
        var nextSlide = currentSlide.next();

        var currentDot = $('.active-dot');
        var nextDot = currentDot.next();

        if (nextSlide.length === 0) {
          nextSlide = $('.slide').first();
          nextDot = $('.dot').first();
        }

        currentDot.removeClass('active-dot');
        nextDot.addClass('active-dot');
      });

      $('.arrow-prev').click(function() {
        var currentSlide = $('.active-slide');
        var prevSlide = currentSlide.prev();

        var currentDot = $('.active-dot');
        var prevDot = currentDot.prev();

        if (prevSlide.length === 0) {
          prevSlide = $('.slide').last();
          prevDot = $('.dot').last();
        }

        currentSlide.fadeOut(600).removeClass('active-slide');
        prevSlide.fadeIn(600).addClass('active-slide');

        currentDot.removeClass('active-dot');
        prevDot.addClass('active-dot');
      });
    }


    $(document).ready(main);

的index.html 

<!doctype html>
<html>

<head>
  <link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
  <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
</head>

<body>
  <div class="header">
    <div class="container">
      <a href="#" class="logo-icon">
        <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/logo.png">
      </a>

      <ul class="menu">
        <li><a href="#">Get the App</a>
        </li>
        <li><a href="#">Tutorials</a>
        </li>
        <li><a href="#">Magazines</a>
        </li>
        <li><a href="#">Web Tools</a>
        </li>
        <li><a href="#">Support</a>
        </li>
        <li><a href="#">Careers</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle">More <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Community</a>
            </li>
            <li><a href="#">Our Blog</a>
            </li>
            <li><a href="#">Maps Blog</a>
            </li>
            <li><a href="#">Eng Blog</a>
            </li>
            <li><a href="#">Advertisers</a>
            </li>
            <li><a href="#">Publishers</a>
            </li>
            <li><a href="#">About Us</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>

  <div class="slider">

    <div class="slide active-slide">
      <div class="container">
        <div class="row">
          <div class="slide-copy col-xs-5">
            <h1>Flipboard Is Your Personal Magazine</h1>
            <p>It's a single place to discover, collect and share the news you care about. Add your favorite social networks, publications and blogs to stay connected to the topics and people closest to you.</p>

            <ul class="get-app">
              <li>
                <a href="#">
                  <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png">
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png">
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png">
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png">
                </a>
              </li>
            </ul>
          </div>
          <div class="slide-img col-xs-7">
            <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/home.png" width="540px">
          </div>
        </div>
      </div>
    </div>

    <div class="slide slide-feature">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <a href="#">
              <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/cnn.png">
            </a>
            <a href="#">Read Now</a>
          </div>

        </div>
      </div>
    </div>

    <div class="slide">
      <div class="container">
        <div class="row">
          <div class="slide-copy col-xs-5">
            <h1>Enjoy Flipboard Magazines</h1>
            <h2>on the Web</h2>
            <p>Millions of people use Flipboard to read and collect the news they care about, curating their favorite stories into their own magazines on any topic imaginable. Now magazines created by our readers, from Dali to End Trafficking, can be shared
              and enjoyed on the Web by anyone, anywhere.</p>

          </div>
          <div class="slide-img col-xs-7">
            <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/magazines.png">
          </div>
        </div>
      </div>
    </div>


    <div class="slide">
      <div class="container">
        <div class="row">
          <div class="slide-copy col-xs-5">
            <h1>Badges & Widgets</h1>
            <p>Millions of people use Flipboard to read and collect the news they care about, curating their favorite stories into their own magazines. Now you can promote the ones you create or think are awesome.</p>

            <ul class="get-app">
              <li>
                <a href="#">
                  <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png">
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png">
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png">
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png">
                </a>
              </li>
            </ul>
          </div>
          <div class="slide-img col-xs-7">
            <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/bw.png" width="540px">
          </div>
        </div>
      </div>
    </div>

  </div>

  <div class="slider-nav">
    <a href="#" class="arrow-prev">
      <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png">
    </a>
    <ul class="slider-dots">
      <li class="dot active-dot">&bull;</li>
      <li class="dot">&bull;</li>
      <li class="dot">&bull;</li>
      <li class="dot">&bull;</li>
    </ul>
    <a href="#" class="arrow-next">
      <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
    </a>
  </div>

  <script src="jquery-1.11.1.min.js"></script>
  <script src="app.js"></script>
</body>

</html>

的style.css 

/* General */

.container {
  width: 960px;
}


/* Header */

.header {
  background-color: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid #ddd;

  font-family: 'Oswald', sans-serif;
  font-weight: 300;

  font-size: 17px;
  padding: 15px;
}


/* Menu */ 

.header .menu {
  float: right;
  list-style: none;
  margin-top: 5px;
}

.menu > li {
  display: inline;
  padding-left: 20px;
  padding-right: 20px;
}

.menu a {
  color: #898989;
}

/* Dropdown */

.dropdown-menu {
  font-size: 16px;
  margin-top: 5px;
  min-width: 105px;
}

.dropdown-menu li a {
  color: #898989;
  padding: 6px 20px;
  font-weight: 300;
}


/* Carousel */

.slider {
  position: relative;
  width: 100%;
  height: 470px;
  border-bottom: 1px solid #ddd;
}

.slide {
  background: transparent url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat;
  background-size: cover;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.active-slide {
    display: block;
}

.slide-copy h1 {
  color: #363636;  

  font-family: 'Oswald', sans-serif;
  font-weight: 400;

  font-size: 40px;
  margin-top: 105px;
  margin-bottom: 0px;
}

.slide-copy h2 {
  color: #b7b7b7;

  font-family: 'Oswald', sans-serif;
  font-weight: 400;

  font-size: 40px;
  margin: 5px;
}

.slide-copy p {
  color: #959595;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15em;
  line-height: 1.75em;
  margin-bottom: 15px;
  margin-top: 16px;
}

.slide-img {
  text-align: right;
}

/* Slide feature */

.slide-feature {
  text-align: center;
  background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ac.png');
  height: 470px;
}

.slide-feature img {
  margin-top: 112px;
  margin-bottom: 28px;
}

.slide-feature a {
  display: block;
  color: #6fc5e0;

  font-family: "HelveticaNeueMdCn", Helvetica, sans-serif;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;

  font-size: 20px;
}

.slider-nav {
  text-align: center;
  margin-top: 20px;
}

.arrow-prev {
  margin-right: 45px;
  display: inline-block;
  vertical-align: top;
  margin-top: 9px;
}

.arrow-next {
  margin-left: 45px;
  display: inline-block;
  vertical-align: top;
  margin-top: 9px;
}

.slider-dots {
  list-style: none;
  display: inline-block;
  padding-left: 0;
  margin-bottom: 0;
}

.slider-dots li {
  color: #bbbcbc;
  display: inline;
  font-size: 30px;
  margin-right: 5px;
}

.slider-dots li.active-dot {
  color: #363636;
}

/* App links */

.get-app {
  list-style: none;
  padding-bottom: 9px;
  padding-left: 0px;
  padding-top: 9px;
}

.get-app li {
  float: left;
  margin-bottom: 5px;
  margin-right: 5px;
}

.get-app img {
  height: 40px;
}

段：

＆＃13;
＆＃13; 
var main = function() {
      $('.dropdown-toggle').click(function() {
        $('.dropdown-menu').toggle();
      });

      $('.arrow-next').click(function() {
        var currentSlide = $('.active-slide');
        var nextSlide = currentSlide.next();

        var currentDot = $('.active-dot');
        var nextDot = currentDot.next();

        if (nextSlide.length === 0) {
          nextSlide = $('.slide').first();
          nextDot = $('.dot').first();
        }

        currentDot.removeClass('active-dot');
        nextDot.addClass('active-dot');
      });

      $('.arrow-prev').click(function() {
        var currentSlide = $('.active-slide');
        var prevSlide = currentSlide.prev();

        var currentDot = $('.active-dot');
        var prevDot = currentDot.prev();

        if (prevSlide.length === 0) {
          prevSlide = $('.slide').last();
          prevDot = $('.dot').last();
        }

        currentSlide.fadeOut(600).removeClass('active-slide');
        prevSlide.fadeIn(600).addClass('active-slide');

        currentDot.removeClass('active-dot');
        prevDot.addClass('active-dot');
      });
    }


    $(document).ready(main);
＆＃13; 
/* General */

.container {
  width: 960px;
}


/* Header */

.header {
  background-color: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid #ddd;
  
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  
  font-size: 17px;
  padding: 15px;
}


/* Menu */ 

.header .menu {
  float: right;
  list-style: none;
  margin-top: 5px;
}

.menu > li {
  display: inline;
  padding-left: 20px;
  padding-right: 20px;
}

.menu a {
  color: #898989;
}

/* Dropdown */

.dropdown-menu {
  font-size: 16px;
  margin-top: 5px;
  min-width: 105px;
}

.dropdown-menu li a {
  color: #898989;
  padding: 6px 20px;
  font-weight: 300;
}


/* Carousel */

.slider {
  position: relative;
  width: 100%;
  height: 470px;
  border-bottom: 1px solid #ddd;
}

.slide {
  background: transparent url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat;
  background-size: cover;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.active-slide {
    display: block;
}

.slide-copy h1 {
  color: #363636;  
  
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  
  font-size: 40px;
  margin-top: 105px;
  margin-bottom: 0px;
}

.slide-copy h2 {
  color: #b7b7b7;
  
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  
  font-size: 40px;
  margin: 5px;
}

.slide-copy p {
  color: #959595;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15em;
  line-height: 1.75em;
  margin-bottom: 15px;
  margin-top: 16px;
}

.slide-img {
  text-align: right;
}

/* Slide feature */

.slide-feature {
  text-align: center;
  background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ac.png');
  height: 470px;
}

.slide-feature img {
  margin-top: 112px;
  margin-bottom: 28px;
}

.slide-feature a {
  display: block;
  color: #6fc5e0;
  
  font-family: "HelveticaNeueMdCn", Helvetica, sans-serif;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  
  font-size: 20px;
}

.slider-nav {
  text-align: center;
  margin-top: 20px;
}

.arrow-prev {
  margin-right: 45px;
  display: inline-block;
  vertical-align: top;
  margin-top: 9px;
}

.arrow-next {
  margin-left: 45px;
  display: inline-block;
  vertical-align: top;
  margin-top: 9px;
}

.slider-dots {
  list-style: none;
  display: inline-block;
  padding-left: 0;
  margin-bottom: 0;
}

.slider-dots li {
  color: #bbbcbc;
  display: inline;
  font-size: 30px;
  margin-right: 5px;
}

.slider-dots li.active-dot {
  color: #363636;
}

/* App links */

.get-app {
  list-style: none;
  padding-bottom: 9px;
  padding-left: 0px;
  padding-top: 9px;
}

.get-app li {
  float: left;
  margin-bottom: 5px;
  margin-right: 5px;
}

.get-app img {
  height: 40px;
}
＆＃13; 
<!doctype html>
<html>

<head>
  <link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
  <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
</head>

<body>
  <div class="header">
    <div class="container">
      <a href="#" class="logo-icon">
        <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/logo.png">
      </a>

      <ul class="menu">
        <li><a href="#">Get the App</a>
        </li>
        <li><a href="#">Tutorials</a>
        </li>
        <li><a href="#">Magazines</a>
        </li>
        <li><a href="#">Web Tools</a>
        </li>
        <li><a href="#">Support</a>
        </li>
        <li><a href="#">Careers</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle">More <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Community</a>
            </li>
            <li><a href="#">Our Blog</a>
            </li>
            <li><a href="#">Maps Blog</a>
            </li>
            <li><a href="#">Eng Blog</a>
            </li>
            <li><a href="#">Advertisers</a>
            </li>
            <li><a href="#">Publishers</a>
            </li>
            <li><a href="#">About Us</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>

  <div class="slider">

    <div class="slide active-slide">
      <div class="container">
        <div class="row">
          <div class="slide-copy col-xs-5">
            <h1>Flipboard Is Your Personal Magazine</h1>
            <p>It's a single place to discover, collect and share the news you care about. Add your favorite social networks, publications and blogs to stay connected to the topics and people closest to you.</p>

            <ul class="get-app">
              <li>
                <a href="#">
                  <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png">
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png">
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png">
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png">
                </a>
              </li>
            </ul>
          </div>
          <div class="slide-img col-xs-7">
            <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/home.png" width="540px">
          </div>
        </div>
      </div>
    </div>

    <div class="slide slide-feature">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <a href="#">
              <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/cnn.png">
            </a>
            <a href="#">Read Now</a>
          </div>

        </div>
      </div>
    </div>

    <div class="slide">
      <div class="container">
        <div class="row">
          <div class="slide-copy col-xs-5">
            <h1>Enjoy Flipboard Magazines</h1>
            <h2>on the Web</h2>
            <p>Millions of people use Flipboard to read and collect the news they care about, curating their favorite stories into their own magazines on any topic imaginable. Now magazines created by our readers, from Dali to End Trafficking, can be shared
              and enjoyed on the Web by anyone, anywhere.</p>

          </div>
          <div class="slide-img col-xs-7">
            <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/magazines.png">
          </div>
        </div>
      </div>
    </div>


    <div class="slide">
      <div class="container">
        <div class="row">
          <div class="slide-copy col-xs-5">
            <h1>Badges & Widgets</h1>
            <p>Millions of people use Flipboard to read and collect the news they care about, curating their favorite stories into their own magazines. Now you can promote the ones you create or think are awesome.</p>

            <ul class="get-app">
              <li>
                <a href="#">
                  <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png">
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png">
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png">
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png">
                </a>
              </li>
            </ul>
          </div>
          <div class="slide-img col-xs-7">
            <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/bw.png" width="540px">
          </div>
        </div>
      </div>
    </div>

  </div>

  <div class="slider-nav">
    <a href="#" class="arrow-prev">
      <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png">
    </a>
    <ul class="slider-dots">
      <li class="dot active-dot">&bull;</li>
      <li class="dot">&bull;</li>
      <li class="dot">&bull;</li>
      <li class="dot">&bull;</li>
    </ul>
    <a href="#" class="arrow-next">
      <img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
    </a>
  </div>

  <script src="jquery-1.11.1.min.js"></script>
  <script src="app.js"></script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

您的代码中缺少一些内容。 添加这个：

currentSlide.fadeOut(500).removeClass('active-slide');
nextSlide.fadeIn(500).addClass('active-slide');

在你的点击事件处理程序中的if语句下面，对于arrow-next将会起作用。

看到这个小提琴：https://jsfiddle.net/6nbo8htt/

相关问题
最新问题