6.5 KiB
title | localeTitle |
---|---|
Guide to Build a Sliding Image Gallery | 构建滑动图像库的指南 |
本教程将引导您使用jQuery库构建图像滑块。
本教程将包含四个部分:
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上的源代码和示例。