jquery 图像滑块_如何使用jQuery构建图像滑块

jquery 图像滑块

This tutorial will walk you through building an image slider using the jQuery library.

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

This tutorial will have four parts:

本教程将分为四个部分：

• HTML

  HTML

• SCSS

  SCSS

• JS

  JS

• References

  参考文献

HTML (HTML)

We will be using Bootstrap for this tutorial to keep things looking good, without spending a lot of time.

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

Our structure will be as follows:

我们的结构如下：

<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>

Inside our ul with the class of slides we will have the following:

在我们的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>

Inside our .buttons class you should have the following:

在我们的.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>

Here is an example of what your html should look like:

这是您的html外观示例：

Note: You should replace the image src attribute with your own content.

注意：您应该用自己的内容替换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 (SCSS)

We are using Sass and the SCSS syntax so we can nest and use variables

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

We can use the following SCSS to define our styling:

我们可以使用以下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 (JS)

变数 (Variables)

In the following code snippet, we define variables used later in our code.

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

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

We will use a blank variable where we will call the setInterval method:

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

var interval;

动画我们将滑块动画包装在一个函数中： (Animation We will wrap our slider animations inside a function:)

function startSlider() {}

We are using the setInterval() native JavaScript method to automate the contents of the function on a time based trigger.

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

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

We use the pause variable to see how many milliseconds to wait before calling the function again. Read more on the native setInterval method here: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval. Inside our function we will use jQuery to fade between slides at the speed of the animationSpeed variable:

我们使用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');

We are targeting the first slide using $('.slides > li:first'). - .fadeOut(animationSpeed) will fade the first slide out and then using .next(), we move to the next slide. - Once we have moved to the next slide, we will fade it in: .fadeIn(animationSpeed). - This sequence will continue until the last slide (.end()), then we stop the animation. We will now call the startSlider function to start the animation:

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

startSlider();

startSlider();

播放和暂停此功能是可选的，但相当容易实现。 我们将隐藏播放按钮，因此我们不会同时看到播放和暂停按钮： (Play and Pause This feature is optional, but quite easy to implement. We will hide the play button, so we don’t see both the play and pause buttons:)

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

We will now create our pause button (automatically shown on page load):

现在，我们将创建我们的暂停按钮(在页面加载时自动显示)：

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

We will call our function every time the pause button is clicked using jQuery. - We will remove the interval using the clearInterval method and using our interval variable as the parameter, indicating which interval to stop. - Because our slider is paused, we will hide the pause button using $(this).hide();. Note: we are using this, which will refer to what our parent is calling i.e. .pause. - We will then show our play button so the user can resume the animation: $('.play').show();. The following code sets up our play button (automatically hidden on page load):

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

$(‘.play’).click(function() { startSlider(); $(this).hide(); $(‘.pause’).show(); });

$('。play')。click(function(){startSlider(); $(this).hide(); $('。pause')。show();});

We will call our function every time the play button is clicked using jQuery.

每次使用jQuery单击播放按钮时，我们都会调用函数。

• We will start or restart the interval using the startSlider function.

  我们将使用startSlider函数启动或重新启动间隔。

• Because our slider is currently playing, we will hide the play button using $(this).hide();. Note: we are using this, which will refer to what our parent is calling i.e. .play.

  因为滑块当前正在播放，所以我们将使用$(this).hide();隐藏播放按钮$(this).hide(); 。 注意：我们正在使用this ，这将引用我们的父级调用的内容，即.play 。

• We will then show our pause button so the user can stop the animation at will: $('.pause').show();.

  然后，我们将显示暂停按钮，以便用户可以随意停止动画： $('.pause').show(); 。

参考文献 (References)

• Checkout the source code and example on CodePen for this tutorial.

  在本教程的CodePen上签出源代码和示例。

翻译自: https://www.freecodecamp.org/news/how-to-build-an-image-slider-with-jquery/

jquery 图像滑块