原生js实现轮播图
原生js实现轮播图
很多网站上都有轮播图，但却很难找到一个系统讲解的，因此这里做一个简单的介绍，希望大家都能有所收获，如果有哪些不正确的地方，希望大家可以指出。
github地址 （如果有用，就star一下吧）
原理：
将一些图片在一行中平铺，然后计算偏移量再利用定时器实现定时轮播。
步骤一：建立html基本布局
如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<body>
<div class="container">
<div class="wrap" style="left:-600px;">
<img src="./img/5.jpg" alt="">
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
<img src="./img/4.jpg" alt="">
<img src="./img/5.jpg" alt="">
<img src="./img/1.jpg" alt="">
</div>
<div class="buttons">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<a href="javascript:;" class="arrow arrow_left"><</a>
<a href="javascript:;" class="arrow arrow_right">></a>
</div>
</body>
</html>
只有五张图片，却使用7张来轮播，这是为了实现无缝轮播，后面会详细介绍。
而5个span，即我们可以实时看到轮播图目前所处的位置。
最后是两个按钮，可以通过它来控制前进与后退。
这里我们需要对wrap使用绝对定位，所以用left:-600px;将第一张图片显示出来。
步骤二： css布局
首先，resetcss，如下所示：
* {
margin:;
padding:;
}
a{
text-decoration: none;
}
接着，我们为了让图片只在container中，所以需要限定其宽度和高度并且使用overflow:hidden；将其余的图片隐藏起来，并且我们希望wrap相对于container左右移动，所以设置为relative，如下：
.container {
position: relative;
width: 600px;
height: 400px;
margin:100px auto auto;
box-shadow: 5px green;
overflow: hidden;
}
我们设置wrap是绝对定位的，所以,我们就可以通过控制Left和Right来控制图片的移动了。设置z-index:1;以对后面将要放置的buttons作为参考。 因为共有七张图片，所以width为4200px（每张图片我们设置为600X400）,我们只需让图片左浮动即可实现占满一排了。
.wrap {
position: absolute;
width: 4200px;
height: 400px;
z-index: ;
}
然后我们把图片设置位左浮动，并限定其大小，如下所示：
.container .wrap img {
float: left;
width: 600px;
height: 400px;
}
现在的效果如下：
即这时已经显示出了第一张图片。并且充满了整个container(container是有box-shadow的);
然后我们把显示次序的buttons放在图片的右下角。并且设置z-index:2;以保证buttons是在图片的上面的。
.container .buttons {
position: absolute;
right: 150px;
bottom:20px;
width: 100px;
height: 10px;
z-index: ;
}
然后将buttons下面的span做一个简单的修饰，并且给和图片对应的span设置一个on类，如下：
.container .buttons span {
margin-left: 5px;
display: inline-block;
width: 20px;
height: 20px;
border-radius: %;
background-color: green;
text-align: center;
color:white;
cursor: pointer;
}
.container .buttons span.on{
background-color: red;
}
接下来，我们把左右切换的箭头加上，然后做简单的修饰，注意：因为这里使用实体来表示左右箭头，所以设置font-size才能改变其大小，
.container .arrow {
position: absolute;
top: %;
color: green;
padding:0px 14px;
border-radius: %;
font-size: 50px;
z-index: ;
display: none;
}
.container .arrow_left {
left: 10px;
}
.container .arrow_right {
right: 10px;
}
.container:hover .arrow {
display: block;
}
.container .arrow:hover {
background-color: rgba(,,,0.2);
}
步骤三：添加js逻辑
我们首先获取到 wrap（因为要设置其left才能控制轮播图），然后获取到左右两个箭头，并实现手动轮播，如下：
var wrap = document.querySelector(".wrap");
var next = document.querySelector(".arrow_right");
var prev = document.querySelector(".arrow_left");
next.onclick = function () {
next_pic();
}
prev.onclick = function () {
prev_pic();
}
function next_pic () {
var newLeft = parseInt(wrap.style.left)-;
wrap.style.left = newLeft + "px";
}
function prev_pic () {
var newLeft = parseInt(wrap.style.left)+;
wrap.style.left = newLeft + "px";
}
值得注意的是，这里wrap.style.left是一个字符串，所以要转化为数字才能进行计算，而设定left时就要加上px成为一个字符串了。
现在我们来测试一下：
可以看到，在第一页时，left值为-600，所以我们可以点击一次上一张，但是当再点击一次时，就出现了空白。同样的，下一张点击，到-3600是最后一张，就不能再继续点击了。
也就是说，当我们点击下一张到-3600px（这是第一张图片）时，我们需要下次跳转到第二张，即-1200px；这样才能正常跳转；
同理，当我们点击上一张到0px（这是第五张图片时），我们希望下次跳转到第四张，即-2400px；
按照这样的思路我们重新将next_pic和prev_pic函数修改如下：
function next_pic () {
var newLeft;
if(wrap.style.left === "-3600px"){
newLeft = -;
}else{
newLeft = parseInt(wrap.style.left)-;
}
wrap.style.left = newLeft + "px";
}
function prev_pic () {
var newLeft;
if(wrap.style.left === "0px"){
newLeft = -;
}else{
newLeft = parseInt(wrap.style.left)+;
}
wrap.style.left = newLeft + "px";
}
这时，我们就可以发现图片可以循环播放了！
但是，这时我们仅仅时手动循环播放的，我们如果希望自动播放，使用setInterval()即可，如下所示：
var timer = null;
function autoPlay () {
timer = setInterval(function () {
next_pic();
},);
}
autoPlay();
即先设定一个计时器，然后创建一个可以自动播放的函数，最后调用这个函数即可。 现在它就可以自动播放了，效果如下：
但是如果我们想要仔细看其中一个图片的时候，我们希望轮播图停止播放，只要clearInterval()即可，如下：
var container = document.querySelector(".container");
container.onmouseenter = function () {
clearInterval(timer);
}
container.onmouseleave = function () {
autoPlay();
}
现在，只要我们把鼠标移入轮播图中，这时轮播图就不会播放了。而移开鼠标之后，轮播图自动播放。
但是到目前为止，轮播图下方的小圆点还没有动，现在我们就实现它。
原理很简单，即设置buttons的index初始值为0，即第一个span的class为on，然后触发next_pic函数时，index加1，当触发prev_pic函数时，inex减1， 并设置当前index的小圆点的class为on， 这就要求index必须设置为全局变量，才能保证它在每一个函数的作用域中。
添加showCurrentDot函数：
var index = ;
var dots = document.getElementsByTagName("span");
function showCurrentDot () {
for(var i = , len = dots.length; i < len; i++){
dots[i].className = "";
}
dots[index].className = "on";
}
在next_pic中添加代码：
index++;
if(index > ){
index = ;
}
在prev_pic中添加大吗：
index--;
if(index < ){
index = ;
}
showCurrentDot();
这样，轮播图就可以自动切换，并且小圆点也在随着图片的变化而变化了。
但是，这距离我们经常看到的轮播图还有一定距离 - - - 当点击小圆点时， 就可跳转到相应图片。 实现原理即： 点击小圆点，就使wrap的Left变成相应的值。代码如下：
for (var i = , len = dots.length; i < len; i++){
(function(i){
dots[i].onclick = function () {
var dis = index - i;
if(index == && parseInt(wrap.style.left)!==-){
dis = dis - ;
}
//和使用prev和next相同，在最开始的照片5和最终的照片1在使用时会出现问题，导致符号和位数的出错，做相应地处理即可
if(index == && parseInt(wrap.style.left)!== -){
dis = + dis;
}
wrap.style.left = (parseInt(wrap.style.left) + dis * )+"px";
index = i;
showCurrentDot();
}
})(i);
}
原理就是当点击到小圆点时，得到相应的i值，这个i值也就是span的index值，我们拿他和全局变量index作比较，然后重新设置wrap.style.left的值，然后把i值复制给全局变量index，最后显示当前的小原点即可。值得注意的是：这里涉及到了闭包的概念，如果直接使用for循环，则不能得到正确的结果。
最终效果如图：
最终代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
* {
margin:;
padding:;
}
a{
text-decoration: none;
}
.container {
position: relative;
width: 600px;
height: 400px;
margin:100px auto auto;
box-shadow: 5px green;
overflow: hidden;
}
.container .wrap {
position: absolute;
width: 4200px;
height: 400px;
z-index: ;
}
.container .wrap img {
float: left;
width: 600px;
height: 400px;
}
.container .buttons {
position: absolute;
right: 5px;
bottom:40px;
width: 150px;
height: 10px;
z-index: ;
}
.container .buttons span {
margin-left: 5px;
display: inline-block;
width: 20px;
height: 20px;
border-radius: %;
background-color: green;
text-align: center;
color:white;
cursor: pointer;
}
.container .buttons span.on{
background-color: red;
}
.container .arrow {
position: absolute;
top: %;
color: green;
padding:0px 14px;
border-radius: %;
font-size: 50px;
z-index: ;
display: none;
}
.container .arrow_left {
left: 10px;
}
.container .arrow_right {
right: 10px;
}
.container:hover .arrow {
display: block;
}
.container .arrow:hover {
background-color: rgba(,,,0.2);
}
</style>
</head>
<body>
<div class="container">
<div class="wrap" style="left: -600px;">
<img src="./img/5.jpg" alt="">
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
<img src="./img/4.jpg" alt="">
<img src="./img/5.jpg" alt="">
<img src="./img/1.jpg" alt="">
</div>
<div class="buttons">
<span class="on"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<a href="javascript:;" class="arrow arrow_left"><</a>
<a href="javascript:;" class="arrow arrow_right">></a>
</div>
<script>
var wrap = document.querySelector(".wrap");
var next = document.querySelector(".arrow_right");
var prev = document.querySelector(".arrow_left");
next.onclick = function () {
next_pic();
}
prev.onclick = function () {
prev_pic();
}
function next_pic () {
index++;
if(index > ){
index = ;
}
showCurrentDot();
var newLeft;
if(wrap.style.left === "-3600px"){
newLeft = -;
}else{
newLeft = parseInt(wrap.style.left)-;
}
wrap.style.left = newLeft + "px";
}
function prev_pic () {
index--;
if(index < ){
index = ;
}
showCurrentDot();
var newLeft;
if(wrap.style.left === "0px"){
newLeft = -;
}else{
newLeft = parseInt(wrap.style.left)+;
}
wrap.style.left = newLeft + "px";
}
var timer = null;
function autoPlay () {
timer = setInterval(function () {
next_pic();
},);
}
autoPlay(); var container = document.querySelector(".container");
container.onmouseenter = function () {
clearInterval(timer);
}
container.onmouseleave = function () {
autoPlay();
} var index = ;
var dots = document.getElementsByTagName("span");
function showCurrentDot () {
for(var i = , len = dots.length; i < len; i++){
dots[i].className = "";
}
dots[index].className = "on";
} for (var i = , len = dots.length; i < len; i++){
(function(i){
dots[i].onclick = function () {
var dis = index - i;
if(index == && parseInt(wrap.style.left)!==-){
dis = dis - ;
}
//和使用prev和next相同，在最开始的照片5和最终的照片1在使用时会出现问题，导致符号和位数的出错，做相应地处理即可
if(index == && parseInt(wrap.style.left)!== -){
dis = + dis;
}
wrap.style.left = (parseInt(wrap.style.left) + dis * )+"px";
index = i;
showCurrentDot();
}
})(i);
}
</script>
</body>
</html>
总结：
实现一个轮播图还是不难的，大体思路： 先创建一个div，限定其宽度和高度，overflow：hidden，且设置其position为relative。然后创建一个装图片的div，宽度为所有图片的总宽度，且设置其position为absolute，并且使其中的内容浮动，这样所有的图片就处于一行中。然后为了实现无缝滚动，所以需要在首尾分别添加一张过渡图片。 先添加两个按钮， 使其可以手动轮播，然后只需要添加一个定时器使其朝一个方向自动轮播即可，因为用户有时需要查看详情，所以当鼠标进入时就clear定时器，滑出再定时播放。为了更好地用户体验，我们再下面添加了一排小圆点，用户可以清楚地知道现在所处的位置， 最后， 利用闭包使得用户可以直接通过点击小圆点切换图片。
什么年龄就去做什么事情。 20岁之前你最应该做的事情就是好好学习； 20岁 - 30岁你最好找一个好的老板、好的公司踏踏实实工作；30岁 - 40岁就可以去做你自己喜欢的事情了，不断去挑战自己；40岁 - 50岁，就少一些折腾吧，努力做好自己最为擅长的事情；50岁 - 60岁就可以去培养新人了； 60岁之后，就可以陪陪孙子、孙女，因为人生还有生活，而不只是工作。
原生js实现轮播图的更多相关文章
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- 原生JS实现轮播图的效果
原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...
- 使用原生js将轮播图组件化
代码地址如下:http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...
- 用原生js封装轮播图
原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...
- 原生js焦点轮播图的实现
继续学习打卡,武汉加油,逆战必胜!今日咱们主要探讨一下原生js写轮播图的问题, 简单解析一下思路: 1,首先写好css样式问题 2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index 2 ...
- 原生js封装轮播图
个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行! 原生js对于思路要求比较高,在js代码我都写有备注,足够理解并使用,即使是小白或者刚入行的程序员也比 ...
- 原生JS设计轮播图
一.效果预览: 由于只能上传2M以下的图片,这里只截取了自动切换的效果: 二.编写语言 HTML.CSS.原生JS 三.编写思路 (一)HTML部分 1..slide意为滑槽,里面存放所有图片: 2. ...
- 手把手原生js简单轮播图
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
随机推荐
- Undefined symbols for architecture armv7错误解决方法
Undefined symbols for architecture armv7: "_OBJC_CLASS_$_BriefMainModel", referenced from: ...
- eclipse手动安装svn和maven
一.给Eclipse安装SVN,最常见的有两种方式:手动方式和使用安装向导方式.具体步骤如下: 方式一:手动安装 1.从官网下载site-1.6.9.zip文件,网址是:subclipse.tigri ...
- 让DIV的滚动条自动滚动到最底部 - 4种方法
方法一:使用锚标记要滚动到的位置,然后通过click方法模拟点击滚动到锚所在位置 <script language="javascript1.2" type="te ...
- 2781: [JSOI2007]文本生成器
2781: [JSOI2007]文本生成器 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 8 Solved: 4[Submit][Status][We ...
- 优酷、YouTube、Twitter及JustinTV几个视频网站的架构
优酷视频网站架构 一.网站基本数据概览据2010年统计,优酷网日均独立访问人数(uv)达到了8900万,日均访问量(pv)更是达到了17亿,优酷凭借这一数据成为google榜单中国内视频网站排名最 ...
- Jquery知识小点备注
jQuery siblings() 方法返回被选元素的所有同胞元素,并且可以使用可选参数来过滤对同胞元素的搜索. 实例演示:点击某个li标签后将其设置为红色,而其所有同胞元素去除红色样式 创建Html ...
- session锁问题
碰到个问题,在使用了session时(如用户登录),如果当前请求时间过长,再执行其他请求都不会有响应,查找了网上资料发现,这个是session锁的问题 目前我们的程序基本流程如下: (1)加载Sess ...
- Android文件管理，实现全选，删除等操作
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> 1.例中数据是读 ...
- LNAMP 中的PHP探针
<?php /* ----------------本探针基于YaHei.net探针------------------- */ error_reporting(0); //抑制所有错误信息 @h ...
- win10新特性，ubuntu子系统（安装及配置）
最新版win10下可以直接跑ubuntu镜像,直接入正题. 这里如果你没有可能是你的版本不是最新的,我这里是最新的win10直接是有这个功能的.勾选后会要求重启,确定即可. 然后win键弹出搜索,输入 ...