现在各种轮播图插件,玲琅满目,用起来也非常方便,通常只需要选择元素然后传入参数就可以了。但是,和授人以鱼不如授人以渔一样的道理,不管怎样最基本的轮播图原理还是应当掌握的。这样不仅有利于我们自己写出来满足自己要求的轮播图,同时也对我们更好的使用其他插件有帮助。当然,最重要的是扎实我们的JavaScript基本功!

切入正题。

轮播,顾名思义,就是图片的循环“播放”。播放可以自动(定时器)也可以手动(按钮)。轮播的精要其实是切换,切换可以是上下左右不同方向的移动来实现切换,移动可以匀速小步调播放的帧动画可以是一步一幅的“僵尸跳”,也可以是透明度渐变。

一,最基本的图片轮播。

最基本的图片轮播有两种基本形式:

  第一种是要轮播的图片排列在一张画布上,画布之上有一个“窗口”,窗口固定,图片的轮播通过移动窗口之下的画布来实现(一般通过操纵它的margin-top或者left来实现)简称为‘视窗画布型’;

  第二种,不需要画布层,窗口的宽高严格等于元素的宽高,通过精准的控制每一个元素的展示层级来实现轮播(一般使用绝对定位来实现)‘绝对定位型’。下面来逐一进行分析。

(1)视窗画布型

这种类型有一个固定的模式,要点如下:

html和css:

第一,需要有固定大小并有超出隐藏属性的div,作为窗口即视窗。

第二,窗口元素内,需要有固定宽度或者高度(取决于你的轮播是左右还是上下切换)的画布元素,它用来容纳你的所有轮播内容,宽度或者高度通常大于窗口元素。

第三,需要展示的内容,固定排列在画布元素上,即第二所述元素;

JavaScript:

第一,动画效果的实现是通过JavaScript操纵画布元素的margin-top,或者margin-left来实现的。

第二,为了实现连续的变换,通常需要画布元素内,对原始内容重复添加;

示例1:等间隔切换的图片。每隔一定时间段,会切换一张图片,切换是瞬时的,和一个常见的轮播图相比缺少切换时的动画效果,先理解一个一个的组件。主要思路是:通过定时器控制,每隔一定时间间隔操作一次元素属性,使之改变,从而实现等间隔切换。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单轮播图</title>
</head>
<style>
ul,li{list-style: none;padding: 0;margin: 0;}
ul{font-size: 0px;}
.window{width: 300px;height: 200px;overflow: hidden;margin: 60px auto;}
.canvas{width: 6666px;height: 200px;}
.canvas img{height: 200px;width:300px;}
ul li{display: inline-block;width: 300px;text-align: center;}
</style>
<body>
<div class="window">
<div class="canvas">
<ul>
<li><img src="data:images/muwu.jpg"></li>
<li><img src="data:images/shuijiao.jpg"></li>
<li><img src="data:images/yuantiao.jpg"</li>
</ul>
</div>
</div>
</body>
<script>
// 通过操作画布元素的左外边距实现左右轮播
//取得视窗和画布元素,定义静态变量
var window1=document.getElementsByClassName('window')[0],
canvas=document.getElementsByClassName('canvas')[0],
stepDistance=300,//每次移动的小距离,也就是没帧位移,单位为像素
i=0,
sum=document.getElementsByTagName('li').length;//轮播子项目总数
//操纵外边距
sliderMove();
function sliderMove(){
//每隔两秒钟切换一次轮播图,到达末尾时从第一张开始。
setInterval(function(){
if (i<sum) {
// 当子项没有完全展示完时,不断移动
canvas.style.marginLeft=(-stepDistance*i)+'px';
i++;
} else{
// 当子项展示完时,从头开始循环
i=0;
canvas.style.marginLeft=(-stepDistance*i)+'px';
i++;
}
},2000);
}
</script>
</html>

这种简单的轮播图,我觉得给它起名为“僵尸跳”,很合适。是在轮播,不过,不和谐, 一次一跳很突兀。

示例2:一直移动的效果,其实也就是第一种实例的细化,帧间隔变大,帧位移变小。图片之间一直在匀速移动,和一个常见的轮播图相比缺少切换时的停顿,即第一个示例的效果,先理解一个一个的组件。主要思路是:通过定时器,在很短的时间内连续移动元素,从而产生类似动画的效果。下面贴上代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单轮播图</title>
</head>
<style>
ul,li{list-style: none;padding: 0;margin: 0;}
ul{font-size: 0px;}
.window{width: 300px;height: 200px;overflow: hidden;margin: 60px auto;}
.canvas{width: 6666px;height: 200px;}
.canvas img{height: 200px;width:300px;}
ul li{display: inline-block;width: 300px;text-align: center;}
</style>
<body>
<div class="window">
<div class="canvas">
<ul>
<li><img src="data:images/muwu.jpg"></li>
<li><img src="data:images/shuijiao.jpg"></li>
<li><img src="data:images/yuantiao.jpg"</li>
<li><img src="data:images/muwu.jpg"></li>
</ul>
</div>
</div>
</body>
<script>
var window1=document.getElementsByClassName('window')[0],
canvas=document.getElementsByClassName('canvas')[0],
stepDistance=300/(3000/13),
sumDistance=0,
sum=(document.getElementsByTagName('li').length-1)*300;
sliderMove();
function sliderMove(){
setInterval(function(){
if (sumDistance<sum) {
canvas.style.marginLeft=(-sumDistance)+'px';
sumDistance+=stepDistance;
} else{
sumDistance=0;
canvas.style.marginLeft=(-sumDistance)+'px';
sumDistance+=stepDistance;
}
},13);
}
</script>
</html>

这个其实是我们后面要说的轮播的同时移动的移动部分的简单原理。其实,无论移动还是停顿都是通过定时器来实现的。

(2)绝对定位型

这是通过操纵元素的z-index来实现切换的动画类型。

二,轮播的同时移动。

三,带按钮的轮播图。

四,有其他特效的轮播图。

五,一些我用过的轮播图插件简介。

未完待续。。。

浅谈轮播图(原生JavaScript实现)的更多相关文章

  1. Web前端原生JavaScript浅谈轮播图

    1.一直来说轮播图都是困扰刚进业内小白的一大难点,因为我们不仅需要自己作出一个比较完美的运动框架(虽然网上一抓一大把,但是哪有比自己做出来实现的有成就感,不是吗?^_^),还必须需要非常关键性的把握住 ...

  2. 轮播图原生js实现和jquery实现和js面向对象方式实现

    原生JS实现 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  3. js 轮播图 (原生)

    注 : 此处内容较多, 只显示代码, 具体讲解看注释.  具体参考 "黑马 pink老师"   https://www.bilibili.com/video/BV1Sy4y1C7h ...

  4. React视角下的轮播图

    天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...

  5. Js-带进度条的轮播图

    带进度条的轮播图--原生JS实现 实现了图片自动轮播,左右按钮实现图片左右转换,下方原点或者缩小图点击选择其中的某一张图片,然后有红条实现图片的进度. <div class="cont ...

  6. 【云开发】10分钟零基础学会做一个快递查询微信小程序,快速掌握微信小程序开发技能(轮播图、API请求)

    大家好,我叫小秃僧 这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...

  7. javascript原生js轮播图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 原生javascript焦点轮播图

    刚刚学会,写了一个轮播图效果,不过bug蛮多,请高手指点一下,谢谢 <!DOCTYPE html> <html> <head> <meta charset=& ...

  9. 用原生的javascript 实现一个无限滚动的轮播图

    说一下思路:和我上一篇博客中用JQ去写的轮播图有相同点和不同点 相同点: 首先页面布局是一样的 同样是改变.inner盒子的位置去显示不同的图片 不同点: 为了实现无限滚动需要多添加两张重复的图片 左 ...

随机推荐

  1. lua向文件中写入数据,进行记录

    function readfile(path) local file = io.open(path, "r") if file then local content = file: ...

  2. VS2013创建Windows服务 || VS2015+Windows服务简易教程

    转自:https://www.cnblogs.com/no27/p/4849123.htmlhttps://blog.csdn.net/ly416/article/details/78860522 V ...

  3. 【Nginx系列】Nginx虚拟主机的配置核日志管理

    Nginx配置段 #user nobody; worker_processes 1;// 有1个工作的子进程,可以自行修改,但太大无益,因为要争夺CPU,一般设置为 CPU数*核数 #error_lo ...

  4. mahony互补滤波器C编程

    //gx...分别为重力加速度在三个轴向的分力 由加速度计测得 //ax...分别为角速度在三个轴向的角速度 由陀螺仪测得 //最后得到最终滤波完毕的x.y.z方向的角度值(°) void IMUup ...

  5. Something about SeekingJob---Resume简历

    这几天脑子里满满的装的都是offer.offer.offer快到碗里来,但是offer始终不是巧克力,并没那么甜美可口易消化. 找工作刚开始,就遇到了不小的阻力,看到Boss直聘上各种与IT相关的工作 ...

  6. Visual Studio 开发工具常用的插件

    转载自落日故乡  http://www.spersky.com/post/vsPlugins.html 该博客中收集整理归纳了若干个常用的vs插件,比如高亮显示当前选择,垂直辅助线,折叠代码等等,具体 ...

  7. java对象转字节数组,获取泛型类

    对象转字节数组,字节数组在恢复成对象 Test.java class Test { public static void main(String args[]) throws IOException, ...

  8. jenkins配置findbugs失败---不要随便忽略警告!一个因为文件所有权引发的血案

    一:背景交代 这两天组长让我这边搭一个持续集成环境.梳理了需求后,因为我们的项目都是maven项目,所以我选择了jenkins+外置maven(区别于直接从jenkins里面安装)的方案.(cento ...

  9. shiro的sessionManager类继承结构及主要类方法

    shiro1.3.2 sessionManage的作用是对会话进行管理. 1.类结构 2.主要接口介绍 SessionManager: 包括两个方法,一个是新建会话,一个是通过key获取会话 Vali ...

  10. ShellCode瘦身的艺术0_HASH

    写在前面的话: 前面几篇文章,我们介绍了如何获取kernerl32.dll导出函数地址的方法: 并在此基础上,编写了ShellCode,实现了动态加载DLL以及解析API地址: 但是,似乎还称不上Pe ...