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

糜正业

2023-12-01

jquery 图像滑块

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

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

This tutorial will have four parts:

本教程将分为四个部分：

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();

播放和暂停此功能是可选的，但相当容易实现。我们将隐藏播放按钮，因此我们不会同时看到播放和暂停按钮： (**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 图像滑块

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

HTML (HTML)

SCSS (SCSS)

JS (JS)

变数 (Variables)

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

参考文献 (References)

相关阅读

相关文章

相关问答

相关文档