原生JS设计轮播图
一、效果预览：
由于只能上传2M以下的图片，这里只截取了自动切换的效果：
二、编写语言
HTML、CSS、原生JS
三、编写思路
（一）HTML部分
1、.slide意为滑槽，里面存放所有图片；
2、.prev存放向左的箭头，.next存放向右的箭头；
3、pointer意为指示器，存放下方的五个切换按钮，每个切换按钮用span来表示；
4、.m-view，意为视窗，即每次看到图片的窗口，它存放以上所有的部件；
（二）CSS部分
1、.m-view设为相对定位，他的后代元素可以以它作为绝对定位的参照；
2、.slide、.prev、.next、pointer全都用绝对定位放到合适位置；
3、.slide的所有图片水平排列，且视窗.m-view的宽度设为只有一张图片那么宽，这样默认情况.slide还是会全部显示；当给.m-view设置overflow:hidden后子元素超出它的部分就会隐藏，就实现了只显示一张图片的效果；
（三）JS部分
1、切换功能：
设置一个切换函数toggle实现左切或者右切一张图，toggle有两个子函数leftToggle和rightToggle分别实现向左、向右切换一张图，将他们分别绑定到.prev和.next按钮的clik事件；
2、切换功能的淡入动画效果
只有1的话切换是立即产生的，没有过渡效果；这里利用定时器和步长将切换功能细化到更小的滑动操作leftStep和rightStep，leftToggle和rightToggle通过多次调用滑动操作来实现一次切换，这样就会产生动画效果；
3、跳转功能
对指示器的每个圆形按钮绑定跳转功能，跳转实际上是将.slide进行移动；
4、自动播放
只需要设置定时器，每隔一定时间执行切换即可；
四、我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
.m-view,.m-view .slide img{
position: relative;/*作为绝对定位的父元素*/
width: 800px;
height: 600px;
}
.m-view{
overflow: hidden;/*将超出该div的子元素隐藏*/
}
.m-view .slide{
position: absolute;
width: 8000px;
height: 600px;
}
.m-view .slide img{
margin-right: -5px;
}
.m-view .prev,.m-view .next{
position: absolute;
top: 40%;
font: 60px/60px Microsoft YaHei;
color: #00BFFF;
}
.m-view .prev{
left: 10px;
}
.m-view .next{
right: 10px;
}
.m-view .pointer{
position: absolute;
bottom: 40px;
left: 33%;
}
.m-view .pointer span{
display: inline-block;/*水平排列*/
width: 40px;
height: 40px;
border-radius: 20px;
margin-right: 10px;
background-color: #00FF00;
}
.m-view .pointer .on{/*点亮当前图片对应的圆圈*/
background-color: #1E90FF;
}
</style>
</head>
<body>
<div class="m-view">
<div class="slide" style="left: -800px">
<img src="../lunbo/5.jpg" alt="4">
<img src="../lunbo/1.jpg" alt="0">
<img src="../lunbo/2.jpg" alt="1">
<img src="../lunbo/3.jpg" alt="2">
<img src="../lunbo/4.jpg" alt="3">
<img src="../lunbo/5.jpg" alt="4">
<img src="../lunbo/1.jpg" alt="0">
</div>
<div class="prev"><</div>
<div class="next">></div>
<div class="pointer">
<span class="button on" index="0"></span>
<span class="button" index="1"></span>
<span class="button" index="2"></span>
<span class="button" index="3"></span>
<span class="button" index="4"></span>
</div>
</div>
<script type="text/javascript">
var view=document.getElementsByClassName('m-view')[0];
var slide=document.getElementsByClassName('slide')[0];
var prev=document.getElementsByClassName('prev')[0];
var next=document.getElementsByClassName('next')[0];
var button=document.getElementsByClassName('button');
var curIndex=0;//当前图片的索引位置
var toggled=true;//是否正在切换，true表明切换已完成，此时才能切换
/* Toggle函数实现切换一张图片的功能 */
function Toggle () {
var TIMER=50;//滑动一次所用的时间，它是setInterval的第二个参数
var time=800;//每切换一张图片总共用的时长
var times=time/TIMER;//每切换一张图片需滑动的次数
var stepLenth=800/times;//每次滑动的步长
var leftToggle=function () {
var t1=times;
function leftStep(){
slide.style.left=parseInt(slide.style.left)+stepLenth+"px";
t1--;
if (!t1) {
clearInterval(interval);
curIndex--;
if (curIndex<0) {
slide.style.left=parseInt(slide.style.left)-4000+"px";
curIndex=4;
};
toggled=true;
};
};
if (toggled==true) {
toggled=false;
button[curIndex].className="button";
if (curIndex!=0) {
button[curIndex-1].className="button on";
}else{
button[curIndex+4].className="button on";
}
var interval=setInterval(leftStep,TIMER);
};
};
var rightToggle=function () {
var t2=times;
function leftStep(){
slide.style.left=parseInt(slide.style.left)-stepLenth+"px";
t2--;
if (!t2) {
clearInterval(interval);
curIndex++;
if (curIndex>4) {
slide.style.left=parseInt(slide.style.left)+4000+"px";
curIndex=0;
};
toggled=true;
};
};
if (toggled==true) {
toggled=false;
button[curIndex].className="button";
if (curIndex!=4) {
button[curIndex+1].className="button on";
}else{
button[curIndex-4].className="button on";
};
var interval=setInterval(leftStep,TIMER);
};
}
this.leftToggle=leftToggle;//输出对外的接口
this.rightToggle=rightToggle;
};
var toggle=new Toggle();
prev.onclick=function () {
toggle.leftToggle();
};
next.onclick=function () {
toggle.rightToggle();
};
/* 点击圆圈跳转功能 */
for (var i = 0; i < button.length; i++) {
button[i].onclick=function () {
var newIndex=parseInt(this.getAttribute("index"));
if (newIndex!=curIndex) {
var distance=-800*(newIndex-curIndex);
slide.style.left=parseInt(slide.style.left)+distance+"px";
button[curIndex].className="button";
button[newIndex].className="button on";
curIndex=newIndex;
};
};
}
/* 自动播放功能，鼠标移上去停止播放，移开再次播放 */
var intervalo=setInterval(toggle.rightToggle,3000);
view.onmouseover=function () {
clearInterval(intervalo);
}
view.onmouseout=function () {
intervalo=setInterval(toggle.rightToggle,3000);
}
</script>
</body>
</html>
五、一些总结
1、本次采用了面向对象和封装的思路，这是因为个人体会到确实面向对象的设计能使代码编写思路更加清晰，还能够免去很多冗余重复的代码，也尝试过其他书写思路，但都会使代码变得不太直观；要注意的一点就是封装后要向外提供接口，且如果是封装在一个函数中，需要实例化一个对象才能调用；
2、在.slide中设置了一个内联样式，这是因为在后面要获取并改变它的left属性，如果不采用内联样式的方法，将无法设置；因为初始时.style.left只能获取内联样式，即使采用内部样式和外部样式也会使得获取的值为undefined。当然，肯定也可以采用其他方法，但是似乎其他方案都更为复杂一些，没找到更简便的方法。
3、在前后各多放置一张图片的作用：
比如，当前是图片1，现在向左切换，可以和其他位置一样先执行统一的左移操作，这时视窗显示额外放置的图片5，再将.slide整体左移使真正的图片5显示在视窗中，这样是先出现了动画效果再“暗中移动”了.slide，就好像没移动一样，真正做到了无缝切换，逻辑也很简单；如果不放置额外的图片，就需要先将视窗左移，使图片5显示在视窗中，这样动画效果难以设置。
4、在获取每个span在它父元素的索引位置时，采用了getAttribute获取自定义的index属性的方法，其他方法肯定也有不少，但是肯定不能在循环中把i的值直接当成span的索引位置。
5、在跳转功能中，如果要跳转的正是当前的页面，应该什么也不做，这样可以优化性能 。
6、在点击左右箭头切换时，先判断上一次动画是否完成，没完成就不切换，这样可以优化性能，否则连续点击可能导致卡顿、切换效果不佳。
7、代码似乎还有可以优化的地方；
8、这个只是制作了一个轮播图，接下来考虑做一个轮播组件，似乎难度要大些，还有3D的轮播效果也想要尝试下了。
原生JS设计轮播图的更多相关文章
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- 原生js实现轮播图
原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
- 封装一个简单的原生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简单轮播图
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
随机推荐
- Shell:Day09-2.笔记
4.模式匹配(地址定界) 1.空值,没有定义,默认就将文件中所有的行,放入awk进行循环 2.对固定的 1,3 行进行操作 sed -n '1,3p' /etc/passwd awk '1,3 ...
- Hadoop安装教程_单机（含Java、ssh安装配置）
文章更新于:2020-3-24 按照惯例,需要的文件附上链接放在文首 文件名:Java SE Development Kit 8u241 文件大小:72 MB+ 下载链接:https://www.or ...
- tf.get_variable
使用tf.get_variable()时,如果检测到命名冲突,系统不会处理冲突,而会报错. 如果已经创建的变量对象,就把那个对象返回,如果没有创建变量对象的话,就创建一个新的. tf.get_vari ...
- AJ学IOS 之ipad开发Popover的基本使用
AJ分享,必须精品 一:效果图 二:注意 对于方法[UIPopoverController dealloc] reached while popover is still visible. 当popo ...
- 【转】Centos7启动网卡（获取ip地址）
这里之所以是查看下IP ,是我们后面要建一个Centos远程工具Xshell 连接Centos的时候,需要IP地址,所以我们这里先 学会查看虚拟机里的Centos7的IP地址 首先我们登录操作系统 用 ...
- 【Java】关键字 和 保留字
Java的关键字[Keyword]和 保留字[Reserved word] 官方描述: https://docs.oracle.com/javase/tutorial/java/nutsandbolt ...
- Salesforce学习 | 系统管理员Admin如何添加用户
作为世界排名第一的CRM云计算软件,不管的是500强还是中小企业,越来越多的公司都选择使用Salesforce来分享客户信息,管理和开发具有更高收益的客户关系.Salesforce Administr ...
- stand up meeting 12/23/2015
part 组员 工作 工作耗时/h 明日计划 工作耗时/h UI 冯晓云 基本完成单词本显示页面的设计和实现 4 完善页面切换 ...
- python之elasticsearch查询
下载所需模块 python安装好的情况下,通过pip install elasticsearch进行es模块的安装 安装完成后通过pip list命中查询 导入模块 from elasticsearc ...
- python 基础篇 模块化
在做项目的时候,虽然你不可能把全世界的代码都放到一个文件夹下,但是类似模块化的思想还是要有的--那就是以项目的根目录作为最基本的目录,所有的模块调用,都要通过根目录一层层向下索引的方式来 import ...