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

最新推荐文章于 2024-04-22 14:32:37 发布

culh2177

最新推荐文章于 2024-04-22 14:32:37 发布

阅读量395

点赞数

文章标签： java python css javascript html ViewUI

原文链接：https://www.sitepoint.com/making-simple-image-slider-html-css-jquery/

版权

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变量中减去一个。