如何添加幻灯片 6、7、8 .. codepen 脚本答案

【问题标题】：how to add slide 6, 7, 8 .. codepen script如何添加幻灯片 6、7、8 .. codepen 脚本
【发布时间】：2017-02-19 18:05:19
【问题描述】：

我无法在此脚本代码笔中添加另一张幻灯片 http://codepen.io/jaytauron/pen/RNgPJb 我尝试添加幻灯片以将示例保留在代码中，但它不起作用。比如图片6不显示。

我是这样做的：

$(function() {
  
    //make functions first

    function showSlide(n) {
        // unbind event listener to prevent retriggering
        $("body").unbind("mousewheel");
        currSlide += n;
        // make sure currslide does not go out of min or max boundaries
        currSlide = currSlide <= 0 ? 0 : currSlide >= $slide.length-1 ? $slide.length-1 : currSlide;
        
        // displacement is window width times current slide number
        var displacment = window.innerWidth*currSlide;
        // translate slides div across to appropriate slide
        $('.slides').css('transform', 'translateX(-'+displacment+'px)');
        // give small delay before rebinding event to prevent retriggering
        setTimeout(function() {
           $("body").bind('mousewheel', mouseEvent);
        }, 800);
        
        // change active class on link
        $('nav a.active').removeClass('active');
        $($('a')[currSlide]).addClass('active');
        
    }
  
    function mouseEvent(e, delta) {
        // On upwards scroll, show next slide (+1)
        // otherwise on downwards scroll show prev slide (-1)
        showSlide(delta >= 0 ? -1 : 1);
        e.preventDefault();
    }
    
    $('nav a').click(function(e) {
        // When link clicked, find slide it points to
        var newslide = parseInt($(this).attr('href')[1]);
        // find how far it is from current slide
        var diff = newslide - currSlide - 1;
        showSlide(diff); // show that slide
        e.preventDefault();
    });
  
    $(window).resize(function(){
      // Keep current slide to left of window on resize
      var displacment = window.innerWidth*currSlide;
      $('.slides').css('transform', 'translateX(-'+displacment+'px)');
    });
    
    //declare vars then make things happen
    
    var currSlide = 0; //Keeps track of slide
    var $slide = $('.slide'); //all slides
    // give active class to first link
    $($('nav a')[0]).addClass('active');
    //add event listener for mousescroll
    $("body").bind('mousewheel', mouseEvent);
    
})

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@-webkit-keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #fff;
  }
}
@keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #fff;
  }
}
@-webkit-keyframes fillColour {
  0% {
    color: #fff;
  }
  50% {
    color: #fff;
  }
  100% {
    color: #333;
  }
}
@keyframes fillColour {
  0% {
    color: #fff;
  }
  50% {
    color: #fff;
  }
  100% {
    color: #333;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

body {
  overflow: hidden;
  font-size: 100%;
}

nav {
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  z-index: 100;
  height: 100vh;
  left: 0;
  width: 10vw;
  font-weight: 300;
  font-size: 1rem;
}
nav ul {
  list-style-type: none;
  height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
}
nav a, nav a:visited, nav a:active {
  text-decoration: none;
  color: #fff;
}
nav a {
  -webkit-transition: color 2s, background 1s;
  transition: color 2s, background 1s;
  padding: 10px;
  position: relative;
  z-index: 0;
}
nav a.active {
  background: rgba(0, 0, 0, 0.9);
}
nav a::before {
  content: "";
  position: absolute;
  height: 0%;
  width: 0%;
  bottom: 0;
  left: 0;
  opacity: 1;
  background: #555;
  z-index: -1;
}
nav a:hover {
  -webkit-animation: fillColour 0.7s forwards ease-in-out;
          animation: fillColour 0.7s forwards ease-in-out;
}
nav a:hover::before {
  -webkit-animation: fill 0.7s forwards ease-in-out;
          animation: fill 0.7s forwards ease-in-out;
  opacity: 1;
}

.slides {
  width: 500vw;
  height: 100vh;
  -webkit-transition: -webkit-transform 0.8s ease;
  transition: -webkit-transform 0.8s ease;
  transition: transform 0.8s ease;
  transition: transform 0.8s ease, -webkit-transform 0.8s ease;
}
.slides .slide {
  height: 100vh;
  width: 100vw;
  background: pink;
  float: left;
  text-align: center;
  background-size: cover;
}
.slides .slide .content {
  width: 80vw;
  padding: 20px;
  background: rgba(255, 255, 255, 0.8);
  margin: 35vh 0 0 15vw;
  border-radius: 5px;
}
.slides .slide .content p {
  padding: 10px 0;
  border-bottom: 1px solid black;
}
.slides .slide:nth-child(1) {
  background-image: url(https://c3.staticflickr.com/3/2636/4151925885_08ddd06f8f_b.jpg);
}
.slides .slide:nth-child(2) {
  background-image: url(https://c4.staticflickr.com/4/3567/3674686610_fa01e84926_b.jpg);
}
.slides .slide:nth-child(3) {
  background-image: url(https://c4.staticflickr.com/8/7223/7004450864_e2960c0e4c_b.jpg);
}
.slides .slide:nth-child(4) {
  background-image: url(https://c3.staticflickr.com/7/6132/5920210210_a16670c195_b.jpg);
}
.slides .slide:nth-child(5) {
  background-image: url(https://c1.staticflickr.com/3/2877/9436373029_1c1b451817_c.jpg);
}
.slides .slide:nth-child(6) {
  background-image: url(../img/6.jpg);
}
.slides .slide img {
  width: 100%;
}

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>Horizontal Scroll Jacking</title>
    <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>


    
    
    <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>

        <link rel="stylesheet" href="css/style.css">

    
    
    
    
  </head>

  <body>

    
<nav>
  <ul>
    <li><a href="#1">Slide 1</a></li>
    <li><a href="#2">Slide 2</a></li>
    <li><a href="#3">Slide 3</a></li>
    <li><a href="#4">Slide 4</a></li>
    <li><a href="#5">Slide 5</a></li>
    <li><a herf="#6">Slide 6</a></li>
  </ul>
</nav>
<div class="slides">
  <div id="1" class="slide">
    <div class="content">
      <h2>Slide 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>
  </div>
  <div id="2" class="slide">
    <div class="content">
      <h2>Slide 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>
  </div>
  <div id="3" class="slide">
    <div class="content">
      <h2>Slide 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>
  </div>
  <div id="4" class="slide">
    <div class="content">
      <h2>Slide 4</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>
  </div>
  <div id="5" class="slide">
    <div class="content">
      <h2>Slide 5</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>
  </div>
  <div id="6" class="slide">
    <div class="content">
      <h2>Slide 6</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur! Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum. Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum, corrupti minus optio. Suscipit obcaecati harum voluptates est quod quasi?</p>
    </div>
  </div>
</div>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js'></script>

        <script src="js/index.js"></script>

    
    
  </body>
</html>

还有html.jade

nav

ul [1,2,3,4,5,6] 中的每个 val 李 a(href='#'+val)= '幻灯片'+val

.slides [1,2,3,4,5,6] 中的每个 val .slide(id=val) 。内容 h2='幻灯片'+val p='Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, odit nihil tempora tenetur！ Fugit reprehenderit saepe impedit at, expedita nemo nulla hic quia placeat ipsum sint, quis unde fugiat tenetur nobis illum。 Nemo laboriosam laudantium aliquam illum fugiat incidunt nostrum，corrupti minus optio。嫌疑人 obcaecati harum voluptates est quod quasi?'

【问题讨论】：

当您尝试运行上述 sn-p 然后尝试查看幻灯片 6 时，您会收到以下错误 "Uncaught TypeError: Cannot read property '1' of undefined" - 这有帮助吗？
不，我不是错误，但幻灯片没有出现

标签： javascript jquery html css pug

【解决方案1】：

你需要更新.slideswidth

1 个容器：100vw

2 个容器：200vw

等等……

这里有 6 个容器：

.slides
  width: 600vw
  height: 100vh
  transition: transform 0.8s ease

http://codepen.io/anon/pen/dpZOxz

【讨论】：

我看到添加到 css 但我不明白如何添加幻灯片 7
嗬，是的！对不起，我理解 ;) 按钮 7 显示幻灯片 6
好吧，我很困惑，我把主播弄错了！谢谢你的帮助，我很高兴；）

【解决方案2】：

您的代码无法正常工作，仅仅是因为拼写错误。

改变这个：

<li><a herf="#6">Slide 6</a></li>

到这里：

<li><a href="#6">Slide 6</a></li>

注意从 herf 到 href 的变化。

【讨论】：