如何使用HTML，CSS和jQuery制作简单的图像滑块

爱被打了一巴掌 2022-12-03 01:56 136阅读 0赞

Slideshows, image sliders, magic picture changing boxes: whatever you call them, the pattern is used all over the internet, so much so that nearly every website has one. If you’re a web developer, the time will come when you may have to build one on your own. With that in mind, let’s look at how we can build a simple image slider using HTML, CSS, and jQuery.

幻灯片，图像滑块，神奇的图片转换框：无论您怎么说，该模式都在整个Internet上使用，以至于几乎每个网站都有一个。 如果您是一名Web开发人员，那么时机到了，您可能必须自己构建一个。 考虑到这一点，让我们看一下如何使用HTML，CSS和jQuery构建简单的图像滑块。

## HTML **(**The HTML**)** ##

We’ll start off by creating a container element, which has the class `container`. Inside of that lie our images. The images are wrapped with div tags, so the slides can be turned into links, or content other than images can be used as a slide. The first container div has some inline style that makes sure the first image in the slider will be visible on page load. There are also two button elements which are used to manually cycle through slides at the users request.

我们首先创建一个容器元素，该元素具有类`container` 。 里面隐藏着我们的图像。 图像用div标签包裹，因此可以将幻灯片转换为链接，或者将图像以外的内容用作幻灯片。 第一个容器div具有某种内联样式，可确保滑块在加载页面时显示第一个图像。 还有两个按钮元素，可用于根据用户要求手动循环浏览幻灯片。

## CSS **(**The CSS**)** ##

This is where we set the width of the image slider, container divs, and the images inside of them. It’s important to note that all of our container divs are set to `display: none;`. If they weren’t, all of our images would be visible at the same time. We’ll use JavaScript to set a container div to `display: inline-block;`, while the rest remain hidden.

这是我们设置图像滑块，容器div以及其中的图像的宽度的地方。 重要的是要注意，我们所有的容器div都设置为`display: none;` 。 如果没有，我们的所有图像将同时可见。 我们将使用JavaScript将容器div设置为`display: inline-block;` ，其余部分则保持隐藏状态。

## JavaScript **(**The JavaScript**)** ##

First up, we need to define a few important variables. The first variable is `currentIndex`, and it is set to 0. The second variable is `items`, which is set to `$('.container div')`. This will return a list of container divs with images inside of them. The third variable is `itemAmt`, which is set to the length of our `items` variable. This last variable gives us the total amount of slides in our image slider.

首先，我们需要定义一些重要的变量。 第一个变量是`currentIndex` ，它设置为0。第二个变量是`items` ，它设置为`$('.container div')` 。 这将返回容器div列表，其中包含图像。 第三个变量是`itemAmt` ，它设置为我们的`items`变量的长度。 最后一个变量为我们提供了图像滑块中的幻灯片总数。

Next, we create a function called ‘`cycleItems`’. This function will be used to display the correct image, while ensuring that the others stay hidden. Inside of this function, we create a variable called `item`. This variable is set to `$('.container div').eq(currentIndex)`. The `eq` method provided by jQuery takes an integer, and will target the first item returned by `$('.container div')` that matches the integer. So if `currentIndex` is 0, `$('.container div').eq(currentIndex)` will target the first image container in our image slider. The next thing to do inside of our cycleItems function is to hide all of our image container divs, and set `item` to `display: inline-block;`.

接下来，我们创建一个名为“ `cycleItems` ”的函数。 此功能将用于显示正确的图像，同时确保其他图像保持隐藏。 在此函数内部，我们创建了一个名为`item`的变量。 此变量设置为`$('.container div').eq(currentIndex)` 。 jQuery提供的`eq`方法采用一个整数，并将以与该整数匹配的`$('.container div')`返回的第一项作为目标。 因此，如果`currentIndex`为0，则`$('.container div').eq(currentIndex)`将定位到图像滑块中的第一个图像容器。 在cycleItems函数中要做的下一步是隐藏所有图像容器div，并将`item`设置为`display: inline-block;` 。

To make sure that our images rotate automatically, we need to provide a way to continuously call our cycleItems function after a certain amount of time has passed. We do this by creating another variable called `autoSlide`. This variable stores a setInterval function, which takes a 3000 millisecond delay, or three seconds. Inside of that function, we increment the `currentIndex` variable by one, so that `$('.container div').eq(currentIndex)` will always reference the next container div. Then we define a very important ‘if’ statement. This statement says that if our `currentIndex` variable is greater than the total amount of images in our slider, reset the variable back to zero. If we didn’t have this if statement, we wouldn’t be able to cycle through our list of images. After the if statement, we call our cycleItems function.

为确保图像自动旋转，我们需要提供一种在经过一定时间后连续调用我们的cycleItems函数的方法。 为此，我们创建了另一个名为`autoSlide`变量。 此变量存储一个setInterval函数，该函数需要3000毫秒的延迟或三秒钟。 在该函数内部，我们将`currentIndex`变量加1，以便`$('.container div').eq(currentIndex)`将始终引用下一个容器div。 然后，我们定义一个非常重要的“ if”语句。 该语句表明，如果`currentIndex`变量大于滑块中的图像总数，则将变量重置为零。 如果没有if语句，则无法循环显示图像列表。 在if语句之后，我们调用cycleItems函数。

Next we define our previous and next actions. These define what will happen when we click the previous and next buttons. They work like the `autoSlide` function, except they cancel the automatic cycling when clicked. To manually cycle through the slides, clicking the next button adds one to the `currentIndex` variable, while clicking the previous button subtracts one from the `currentIndex` variable.

接下来，我们定义上一个和下一个动作。 这些定义了当我们单击上一个和下一个按钮时将发生的情况。 它们的作用类似于`autoSlide`功能，但单击时它们会取消自动循环。 要手动浏览幻灯片，请单击下一个按钮将一个添加到`currentIndex`变量中，而单击上一个按钮将从`currentIndex`变量中减去一个。

## 演示 **(**The Demo**)** ##

See the Pen [JS pen \#1][JS pen _1] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[CodePen][SitePoint]上[SitePoint][CodePen] ( [@SitePoint][SitePoint] )的Pen [JS笔＃1][JS pen _1] 。

## 奖金 **(**Bonus**)** ##

To see an image slider built using only CSS and HTML, [check out this demo by Zack Wallace][]!

要查看仅使用CSS和HTML构建的图像滑块， [请查看Zack Wallace的演示][check out this demo by Zack Wallace] ！

> 翻译自: [https://www.sitepoint.com/making-simple-image-slider-html-css-jquery/][https_www.sitepoint.com_making-simple-image-slider-html-css-jquery]

[JS pen _1]: https://codepen.io/SitePoint/pen/YqmjRj/
[SitePoint]: http://codepen.io/SitePoint
[CodePen]: http://codepen.io
[check out this demo by Zack Wallace]: https://codepen.io/zackw/pen/FcIaq
[https_www.sitepoint.com_making-simple-image-slider-html-css-jquery]: https://www.sitepoint.com/making-simple-image-slider-html-css-jquery/