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 usingthis
, 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构建图像滑块相关推荐
- jquery 滑块_如何使用jQuery创建动画图库(滑块工具)
jquery 滑块 Slider kit tutorial. Today we continue overviews of available photo galleries. Next galler ...
- cdn jquery怎么没有提示_第一个jQuery程序
1.配置jQuery环境 1.1获取jQuery最新版本 进入jQuery的官方网址 http://jquery.com ,下载最新的jQuery库. 1.2 jQuery库类型说明 目前jQuery ...
- jquery开发插件_如何开发jQuery插件
jquery开发插件 We have gone through different jQuery event methods, jQuery effects and animations in the ...
- python opencv 图像切割_【OpenCV+Python】图像的基本操作与算术运算
图像的基本操作 在上个教程中,我们介绍了使用鼠标画笔的功能.本次教程,我们将要谈及OpenCV图像处理的基本操作. 本次教程的所有操作基本上都和Numpy相关,而不是与OpenCV相关.要使用Open ...
- 深度学习图像融合_基于深度学习的图像超分辨率最新进展与趋势【附PDF】
因PDF资源在微信公众号关注公众号:人工智能前沿讲习回复"超分辨"获取文章PDF 1.主题简介 图像超分辨率是计算机视觉和图像处理领域一个非常重要的研究问题,在医疗图像分析.生物特 ...
- 使用jquery制作计算器_如何使用jQuery对计算器进行编程
使用jquery制作计算器 Previously, I showed you how to use CSS border-radius property to create the following ...
- python图像检测_如何用Python检测图像中的矩形项
我发现了很多关于使用openCV等人在图像中找到"东西"的问题.在 Python中,但到目前为止,我一直无法将它们拼凑在一起,以便为我的问题提供可靠的解决方案. 我正在尝试使用计算 ...
- python分段函数图像画法_数值实验分段函数图像-Python绘图
一.函数说明 在使用python作图时,应用最广的就是matplotlib包,但我们平时使用matplotlib时主要是画一些简单的图表,很少有涉及分段函数.本次针对数值实验中两个较为复杂的函数,使用 ...
- matlab 增加图像对比度_计算机视觉学习笔记6 图像直方图与直方图均衡化
图像的直方图 图像直方图表示图像中每一种像素的个数,反映了图像中每种像素值出现的频率,是图像的基本统计特征之一,具有平移,旋转,缩放不变性,广泛应用于图像处理的各个领域.比如灰度图像的阈值分割,基于颜 ...
最新文章
- golang 时间日期 时区 格式 简介
- php使用redis持久化,Redis持久化完整版本
- yii2 java_YII2 自定义日志路径
- Gym 101194D Ice Cream Tower
- 设计模式(一)----单例模式
- python设计模式免费_python 设计模式
- 关于G - Naive Operations的一些试探性想法
- 引用类型-Function类型
- AXURE 8.1.0.3382 有效激活码
- stm32学习笔记——电容触摸按键的实现
- 【STM32f401学习之路-01】GPIO实战—点灯、检测按键
- 单细胞测序原理10X UMI Barcode
- The vertically scrolling ScrollView should not contain another vertically scrolling widget (ListView
- 业务流程优化设计之思想和原则 (转载)
- 测试正则表达式的小方法
- 为什么Linux的fdisk分区时第一块磁盘分区的First Sector是2048?
- 胡耀文教你:裂变8级、转化率32%、K值7.4的老带新式分销全复盘
- 解决:微信小程序+Vant——使用van-grid以及van-card图片加载不出来的问题
- C/C++二维数组总结
- 计算k段流水线执行n条指令的执行时间
热门文章
- 关于封装 c# 115691143
- 草稿 断开式的连接 1127
- 前端错误日志上报相关实践
- (原創) 如何使用Operator Overloading? (C/C++)
- AWS EC2怎么动态增加磁盘空间
- 回顾一下Unix哲学
- Bean context must contain FilterChainProxy
- flex中DataGrid里使用itemRenderer后数据无法绑定到数据源的问题
- Android Logcat 报错:Could not create the view: For input string:
- 免费在线生成工具大全