老徐WEB：最简单详细的轮播图原理和制作过程（一）

老徐利用空闲时间，制作了一个最简单的轮播图，主要介绍轮播图的原理和制作过程，只要大家能认真看完这篇文章，并理解文中内容，就能完全掌握轮播图的制作了。之后工作中碰到复杂的轮播图，自己也能思考制作出来了。

对于这篇文章，老徐的建议是先认真看一遍内容，不着急写代码。边看边理解边消化，等你真正理解整个制作过程，代码只是顺手的事。对于部分前端开发者来说，JS算有些难度，这个轮播图里的JS不多，难度不大，都是平常用到的JS语句，而且注释也很详细。慢慢看细细看，多想想，实在不明白的，可以打印日志，看看输出结果。

轮播图原理：（老徐个人的想法）多张图片（多数4-5张）排列成图片列表，当前只显示一张，其它隐藏起来，图片每次移动一点距离，这个过程很快，肉眼感觉不出是一点一点的移动，所以整个移动过程很连贯，图片与图片之间稍有停顿。

制作过程：

HTML搭架子。虽然是制作简单的轮播图，其实也是制作一个完整的网页，所以HTML的基本元素是要有的。还得准备几张图片吧，不然播什么呢，这就是整个的框架了。

<!DOCTYPE html>
<html><head><title>最简单详细的轮播图原理和制作过程</title><meta http-equiv="Content-Type" content="text/html" charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" /><style><!-- 添加CSS代码 --></style></head><body><div class="box" id="box"><ul style="left:0px;"><!-- 默认style可写可不写，改变此left值用来滚动图片 --><li><img src="./images/a.png" /></li><li><img src="./images/b.png" /></li><li><img src="./images/c.png" /></li><li><img src="./images/d.png" /></li><li><img src="./images/e.png" /></li></ul></div><script><!-- 添加JS代码 --></script></body>
</html>

CSS整理图片。CSS的主要功能有两点。一是把所有图片排列成水平方向上一排。二是只显示当前一张图片，其它图片隐藏。

刚搭好HTML框架时，所有图片是垂直方向一字排列的，轮播图都是自动水平向左滚动的，所以要先把图片在水平方向上排成一排，相当于一个图片列表。此时图片都是显示的，所以还要把多余的图片隐藏，只保留当前一张显示的图片。图片列表的宽度是图片宽度乘上图片个数，我们要多保留一个图片的宽度，用于存放克隆的图片。

body, div, ul, li, img {margin:0;padding:0;list-style:none;
}
.box {position:relative;width:500px;height:330px;margin:50px auto;overflow:hidden; /*只显示当前图片，隐藏其余图片。没有此属性，显示所有排成一列的图片*/
}
.box ul {position:absolute;top:0;left:0;width:3000px; /* 多个一张图片的空间，备用*/
}
.box ul li {float:left; /* 使图片排成一列 */
}

JS自动轮播。HTML和CSS已经把图片整理好了，接下来就是让图片滚动起来了。JS的功能就页面交互，实现动态效果，就是让图片动起来。
首先找到图片列表的存放位置，接着设置列表的left值，left值的变化过程就是图片移到的过程。在此期间先要克隆第一张图片，放到列表的最后，使滚动连贯起来。

var box = document.getElementById("box");
var ul = box.children[0];
var list = ul.children;
var imgWidth = box.offsetWidth; // 图片宽度
var len = list.length; // 图片个数
var movePx = 15; // 每次滚动的距离(px)
var picFlag = 0; // 默认显示第一张图片，图片的下标
var periodTime = 3000; // 一张图片滚动结束后到下一张滚动结束，这一周期的时间，
var timer = null; // 滚动定时器
/*
一张图片缓慢移动一次movePx距离的时间(毫秒)，如果此值设置较大(1000)，
可以看到图片缓慢移动的过程，但同时也要注意设置movePx的值
*/
var setTime = 10;console.log(imgWidth);
console.log(ul.offsetLeft);
/* 滚动的函数 *//*0, -500, -1000, -1500, -2000, -2500, -500, -1000, -1500*/
function roll(distance){ // distance 滚动的距离，一定是图片宽度的整数倍// 把autoRun里的ul.timer部分拿过来即可
}
ul.append(list[0].cloneNode(true));/*把第一张图片克隆一份，放到图片列表最后，使滚动连贯*/
function autoRun(){clearInterval(ul.timer);picFlag++; // 准备显示下一张图片if(picFlag == len){ // 此时滚动到克隆的那张图片了picFlag = 1; // 准备滚动下标为1的图片ul.style.left = 0; // 相当于从头开始}var distance = -picFlag * imgWidth; // console.log(distance);/* 滚动定时器 10毫秒移动一次*/ul.timer = setInterval(function(){ul.style.left = ul.offsetLeft - movePx + "px";var leave = distance - ul.offsetLeft; // 到终点前剩下的距离if(Math.abs(leave) < Math.abs(movePx)){clearInterval(ul.timer);ul.style.left = distance + "px"; // 不足一次滚动的距离时，直接到达}}, setTime);}
timer = setInterval(autoRun, periodTime); // 开始滚动

最后总结：这个事例很简单，也是最基础的轮播图。在理解的基础上，再动手敲一遍代码，可以更深刻的理解。
下次老徐再弄一个复杂些的，也是工作中常用的轮播图。右下角带提示，同时还有左右按钮的。

关注【老徐WEB前端开发教程】，回复：简单轮播图，即有完整代码和素材分享。

老徐WEB：最简单详细的轮播图原理和制作过程（一）相关推荐

html 轮播图+二级菜单制作
1.html 轮播图+二级菜单制作 2.sunny前面写过二级菜单的制作以及轮播图的制作,这一次sunny把他们结合在一起了ヾ(≧▽≦*)o
html轮播图原理,30_用js实现一个轮播图效果，简单说下原理
一.原理将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局如下所示: 轮播图 1 2 3 4 5 < > 只有五张图片,却使用7张来轮播,这 ...
动画以及简单动画案例轮播图
我们经常见到京东,淘宝的首页中总是有轮播图出现,今天我们用简单的动画效果实现一下.先看一下animation有什么属性,看下思维导图: 动画会把我们的静态页面变得丰富有趣起来,很多页面中都有简单的动画 ...
超级简单的jquery轮播图demo
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>轮播图 ...
Android轮播图原理思路分析+实现方案
来自:http://blog.csdn.net/wubihang/article/details/52512597 ListView的headerView设置为轮播图之后结合上/下拉刷新/加载的模式成 ...
简单的实现轮播图和RecyclerView效果
简单的实现的效果,可以吸取里面的知识点. 效果图: 首先写网络权限: <uses-permission android:name="android.permission.INTERNE ...
老徐WEB：JS简单实现图片滚动效果轮播图，自动、手动和自适应(二)
轮播图是前端网页中常用的功能,包括PC端和移动端,都会用到轮播图,像咨讯.电商和个人博客等,首页基本都会有轮播图. 老徐在上一篇文章的基础上[最简单详细的轮播图原理和制作过程],又扩展了功能,使之成为 ...
轮播图详细制作思路与过程
轮播图详细制作思路与过程图片轮播我们经常在众多网站中看到,各种轮播特效有着非常美观炫酷的视觉效果.很多初学js的小伙伴都很心生向往.我也不例外,所以在此分享个写轮播图的思路和过程,有不足之处请多多指 ...
制作一个简单的轮播图（详解新手教学）
制作一个简单的轮播图(详解新手教学) 相信很多初学者,无论是前端还是后端,对于制作页面时,都想自己亲手制作一个轮播图. 如何制作一个轮播图: 基础知识:有HTML,Css,js基础本文使用技术: H ...

老徐WEB：最简单详细的轮播图原理和制作过程（一）

老徐WEB：最简单详细的轮播图原理和制作过程（一）相关推荐

最新文章

热门文章