javascript - 我的 JS 无法处理我的 html/css。不知道为什么。 (控制台错误 'ReferenceError: $ is not defined')

我正在尝试创建一个内容 slider ，但在使其正常运行时遇到困难。具体来说，在本地测试时，不起作用的方面是:(当您单击向左或向右箭头时，当前幻灯片淡出并淡入，但幻灯片内容不会切换到下一个内容 block 。)

这是我的 HTML:

<!DOCTYPE html>
<html>
<head>
<html lang="en-US">
<meta charset="UTF-8">

<title>PLACEHOLDER</title>

<meta name"keywords" content="PLACEHOLDER" />

<meta name"description" content="PLACEHOLDER" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="code.js"></script>
<link type="text/css" rel="stylesheet" href="style2.css" />
</head>

<body>

<div class="slider">

  <div class="slide active-slide">
    <div class="container">
      <div class="row">
        <div class="slide-copy col-xs-5">
          <h1 id="welcome">FIRST SLIDE HEADER</h1>
          <div id="img1">
            <img src="######.png" width="450" height="250" />
          </div>
          <div id="intro">
            <p>FIRST SLIDE CONTENT</p </div>

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


      <div class="slide slide-feature">
        <div class="container">
          <div class="row">
            <div class="col-xs-12">
              <h1>Slide2</h1>
              <p>Slide 2 stuff.</p>
            </div>

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

      <div class="slide">
        <div class="container">
          <div class="row">
            <div class="slide-copy col-xs-5">
              <h1>Slide 3</h1>
              <h2>Slide3</h2>
              <p>Slide3 content</p>

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


      <div class="slide">
        <div class="container">
          <div class="row">
            <div class="slide-copy col-xs-5">
              <h1>Slide 4</h1>
              <p>slide 4 content</p>


            </div>

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

    </div>

    <div class="slider-nav">
      <a href="#" class="arrow-prev">
        <img src="ARROW LEFT IMAGE">
      </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="ARROW RIGHT IMAGE">
      </a>
    </div>

这是我的 JS:

var main = function () {
$('.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();
   }
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
   
   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);

这是我的 CSS(只是将它们连接在一起):

.slider {
 position: relative;
  width: 50%;
  height: 470px;
  margin-left: 25%;
  border-bottom: 1px solid #ddd;
margin-top: -8%;
}

.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;
margin-top: 30%;
}

.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;
}

注意:我只放置了对这种情况重要的 html/js/css 部分。我对一些文本和图像使用了占位符。在我的本地计算机上，这些占位符被替换为正确的内容。

最佳答案

如果仔细查看 HTML，您会发现 slider div 的位置不正确。所有其他 div 都属于 '.slide' 类包含在 <div class="slide active-slide"> 内而它们应该是相互独立的。 javascript 代码无法找到 next()幻灯片，因为它们都包含在一个父级中，即 'active-slide'

您需要将 HTML 更新为以下内容

<div class="slider">

    <div class="slide active-slide">
        <div class="container">
            <div class="row">
                <div class="slide-copy col-xs-5">
                    <h1 id="welcome">FIRST SLIDE HEADER</h1>
                    <div id="img1">
                        <img src="######.png" width="450" height="250" />
                    </div>
                    <div id="intro">
                        <p>FIRST SLIDE CONTENT</p </div>

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

    <div class="slide slide-feature">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <h1>Slide2</h1>
                    <p>Slide 2 stuff.</p>
                </div>

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

    <div class="slide">
        <div class="container">
            <div class="row">
                <div class="slide-copy col-xs-5">
                    <h1>Slide 3</h1>
                    <h2>Slide3</h2>
                    <p>Slide3 content</p>

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


    <div class="slide">
        <div class="container">
            <div class="row">
                <div class="slide-copy col-xs-5">
                    <h1>Slide 4</h1>
                    <p>slide 4 content</p>


                </div>

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

</div>
<div class="slider-nav">
    <a href="#" class="arrow-prev">
        <img src="ARROW LEFT IMAGE">
    </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="ARROW RIGHT IMAGE">
    </a>
</div>

这是一个工作 JSFIDDLE 相同。希望这有帮助

关于javascript - 我的 JS 无法处理我的 html/css。不知道为什么。 (控制台错误 'ReferenceError: $ is not defined')，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31970437/

javascript - 我的 JS 无法处理我的 html/css。不知道为什么。 (控制台错误 'ReferenceError: $ is not defined')

上一篇：javascript - 更改行的颜色而不刷新页面

下一篇：javascript - 将 Select2 限制为仅一次搜索