freeCodeCamp/guide/chinese/miscellaneous/guide-to-build-a-sliding-image-gallery/index.md

title	localeTitle
Guide to Build a Sliding Image Gallery	构建滑动图像库的指南

本教程将引导您使用jQuery库构建图像滑块。

本教程将包含四个部分：

• HTML
• SCSS
• JS
• 参考

HTML

我们将在本教程中使用Bootstrap来保持良好的外观，而无需花费大量时间。

我们的结构如下：

<div class="container"> 
 
  <!-- The wrapper for our slider --> 
  <div class="slider"> 
    <ul class="slides"><!-- Each image will be inside this unordered list --></ul> 
  </div> 
 
  <div class="buttons"><!-- Pause and play buttons will go in here --></div> 
 
 </div> 

在我们的ul与slides类中，我们将有以下内容：

<li class="slide"><img src="#" /></li> 
 <li class="slide"><img src="#" /></li> 
 <li class="slide"><img src="#" /></li> 
 <li class="slide"><img src="#" /></li> 
 <li class="slide"><img src="#" /></li> 

在我们的.buttons类中，你应该有以下内容：

<button type="button" class="btn btn-default pause"> 
    <span class="glyphicon glyphicon-pause"></span> 
 </button> 
 <button type="button" class="btn btn-default play"> 
    <span class="glyphicon glyphicon-play"></span> 
 </button> 

以下是您的html应该是什么样子的示例：

注意：您应该将image src属性替换为您自己的内容。

<div class="container"> 
 
  <div class="slider"> 
    <ul class="slides"> 
      <li class="slide"><img src="https://unsplash.it/1280/720/?image=120" /></li> 
      <li class="slide"><img src="https://unsplash.it/1280/720/?image=70" /></li> 
      <li class="slide"><img src="https://unsplash.it/1280/720/?image=50" /></li> 
      <li class="slide"><img src="https://unsplash.it/1280/720/?image=170" /></li> 
      <li class="slide"><img src="https://unsplash.it/1280/720/?image=190" /></li> 
    </ul> 
  </div> 
 
  <div class="buttons"> 
    <button type="button" class="btn btn-default pause"> 
      <span class="glyphicon glyphicon-pause"></span> 
    </button> 
    <button type="button" class="btn btn-default play"> 
      <span class="glyphicon glyphicon-play"></span> 
    </button> 
  </div> 
 
 </div> 

SCSS

我们使用Sass和SCSS语法，因此我们可以嵌套和使用变量

我们可以使用以下SCSS来定义我们的样式：

// Variables 
 $width: 720px; 
 
 .slider { 
  width: $width; 
  height: 400px; 
  overflow: hidden; 
  margin: 0 auto; 
  text-align: center; 
 
  .slides { 
    display: block; 
    width: 6000px; 
    height: 400px; 
    margin: 0; 
    padding: 0; 
  } 
 
  .slide { 
    float: left; 
    list-style-type: none; 
    width: $width; 
    height: 400px; 
 
    img { 
      width: 100%; 
      height: 100%; 
    } 
  } 
 } 
 
 .buttons { 
  margin: 0; 
  width: $width; 
  position: relative; 
  top: -40px; 
  margin: 0 auto; 
 
  .play { 
    display: none; 
  } 
 
  .btn { 
    display: flex; 
    margin: 0 auto; 
    text-align: center; 
  } 
 } 

JS

变量

在下面的代码片段中，我们定义了稍后在代码中使用的变量。

var animationSpeed = 1000; // How quickly the next slide animates. 
 var pause = 3000; // The pause between each slide. 

我们将使用一个空变量，我们将调用setInterval方法：

var interval; 

动画我们将滑块动画包装在一个函数中：

function startSlider() {} 

我们使用setInterval()本机JavaScript方法在基于时间的触发器上自动化函数的内容。

interval = setInterval(function() {}, pause); 

我们使用pause变量来查看再次调用函数之前要等待多少毫秒。在此处阅读有关本机setInterval方法的更多信息：https：//developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval。在我们的函数内部，我们将使用jQuery在animationSpeed变量的速度之间淡入幻灯片：

$('.slides > li:first') 
  .fadeOut(animationSpeed) 
  .next() 
  .fadeIn(animationSpeed) 
  .end() 
  .appendTo('.slides'); 

• 我们使用$('.slides > li:first')定位第一$('.slides > li:first') 。 - .fadeOut(animationSpeed)将淡出第一张幻灯片，然后使用.next() ，我们移动到下一张幻灯片。 - 一旦我们移动到下一张幻灯片，我们将淡入淡出： .fadeIn(animationSpeed) 。 - 此序列将一直持续到最后一张幻灯片（ .end() ），然后我们停止动画。我们现在将调用startSlider函数来启动动画：

  startSlider（）;

播放和暂停_此功能是可选的，但很容易实现。_我们将隐藏播放按钮，因此我们看不到播放和暂停按钮：

$('.play').hide(); // Hiding the play button. 

我们现在将创建暂停按钮（在页面加载时自动显示）：

$('.pause').click(function() { 
    clearInterval(interval); 
    $(this).hide(); 
    $('.play').show(); 
 }); 

• 每次使用jQuery单击暂停按钮时，我们将调用我们的函数。 - 我们将使用clearInterval方法删除间隔，并使用我们的interval变量作为参数，指示要停止的间隔。 - 因为我们的滑块已暂停，我们将使用$(this).hide();隐藏暂停按钮$(this).hide(); 。注意：我们正在使用this ，它将引用我们的父母正在调用的内容，即.pause 。 - 然后我们将显示我们的播放按钮，以便用户可以恢复动画： $('.play').show(); 。以下代码设置我们的播放按钮（在页面加载时自动隐藏）：

  （'。play'）。click（function（）{ startSlider（）; （本）.hide（）; $（ '暂停'）显示（）。 }）;

• 每次使用jQuery单击播放按钮时，我们将调用我们的函数。

  • 我们将使用startSlider函数启动或重新启动间隔。
  • 因为我们的滑块当前正在播放，我们将使用$(this).hide();隐藏播放按钮$(this).hide(); 。注意：我们正在使用this ，它将引用我们的父母.play 。
  • 然后我们将显示我们的暂停按钮，以便用户可以随意停止动画： $('.pause').show(); 。

参考

• 查看本教程的CodePen上的源代码和示例。