轮播图，功能其实蛮简单，你学android 会遇到， （android 当中还有指示器啥的（就那个小圆点））
// 自动轮播还要防止内存泄露，这里先不扯了，我们先搞一下，我们小小网页的轮播！
１，布局！
这个布局很简单，就是一个ｄｉｖ，包含上中下三块！
下面就是ｃｓｓ
也没有多少ｃｓｓ 代码很简单，好了，布局我们搞定了，
下面就是ｊｓ
我们所有的js 代码都在这里面
1， 找到控件！
11， 静态初始化
2， 添加事件
3， 动态联动
动态联动的方法，已经写在事件处理函数中了，下面是我提取的一个在很多地方都需要用到的方法
（主要是为了复用）
最后思维总结
基本套路，
1， 找到控件，2 添加事件，3 事件联动（事件处理程序）
（我为啥叫事件联动，因为一个动作，会引起一大堆组件的变化，就像购物车，你添加一个商品，总价就会变， 商品总数也会变）
这跟我们现实当中一样， 一个小孩生病了，会引起父母的一大堆动作， 这就是多个对象之间的联动，或者说互相影响，
有关系才有联动， 没关系，无法联动！
其实我们程序员，就相当于大管家，相当于企业的管理者， 把合适的人放到合适的位置，让他们分工明确，同时让他们在一定规则下联动！
所以说，程序员都是高手！ 变成企业家没问题，
最后在扯一句， 上面程序，用到了，边界处理， 定时器，函数提取等基本思想！
也涉及到了，基本组件的基本思路，比如，
静态页面，（布局）
静态显示（初始化）
静态刚开始的显示
动态初始化
标记变量，一些数据的基本处理
绑定事件
，动态联动
写事件处理程序
——————————————————————————————————————————
以后vue 拆组件可用到上面思想！！
我把代码放下面，大家去读一读代码，拆拆代码
<!DOCTYPE html>
<html>
<head>
<title>lunbo</title>
<meta charset="UTF-8">
<style type="text/css">
*{
padding: 0;
margin:0;
}
.outer{
width: 500px;
background-color:#ADFF2F;
margin: 50px auto;
padding: 10px;
/*让文本或者行内块元素水平居中显示*/
text-align: center;
}
.outer p{
text-align: center;
}
.outer .p1{
margin-top: 10px;
/*border: 1px solid;*/
}
.test{
width: 100px;
background-color: #bfa;
height: 100px;
}
</style>
<script type="text/javascript">
// 组件化，就是把下面这些， 静态页面，动态事件， 一系列的功能给它封装起来，
// 和外部交互给封装起来，然后交给上层处理，其实说白了，就是封装多一点
// 像我们 android 不都是封装好多东西嘛， okHttp retrofit 等库!
window.onload = function(){
// 回调函数中执行！ 这里就是可以放心的工作
var imgs = ['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'];
var currentPos = 0;
// 初始化具体的参数
var total = imgs.length;
var timer = null;
//1 找到控件
var oBtnPre = document.getElementById('pre');
var oBtnNext = document.getElementById('next');
// getElementsByTagName('#')：类似数组的对象
var oImg = document.getElementsByTagName('img')[0];
var oInfo = document.getElementById('info');
var oStart = document.getElementById('start');
// 静态处理！
oInfo.innerHTML = "总共"+total+"页" + "当前是第"+1+"页";
// 可被调用的函数(动态联动所需要写的函数)
function changeInfo(oInfo,total,currentPos){
oInfo.innerHTML = "总共"+total+"页" + "当前是第"+(++currentPos)+"页";
}
// 自动下一页
function next(){
currentPos++;
if(currentPos>=total){
currentPos = 0;
}
// 下一页（要有一个数组存放图片的集合！）；
oImg.src = "img/" + imgs[currentPos];
changeInfo(oInfo,total,currentPos)
}
// 设置事件
oBtnNext.onclick = function(){
// currentPos++;
// if(currentPos>=total){
// currentPos = 0;
// }
// // 下一页（要有一个数组存放图片的集合！）；
// oImg.src = "img/" + imgs[currentPos];
// changeInfo(oInfo,total,currentPos)
next();
}
oStart.onclick = function(){
// 这个逻辑是多么简单，为啥能够轻松的就写出这样的代码，很简单啦，因为我写过好多遍，
// android 百分之百写过， 以前也写过，这就是代码能力， 要多写！思维自动就提升上去了，
// 就像我写单例模式+ 链式写法，随手就写了，都是练习出来的！
if(timer==null){
timer = setInterval(function(){
next();
},1000);
}else{
clearInterval(timer);
timer = null;
}
}
oBtnPre.onclick = function(){
currentPos--;
if(currentPos<0){
// 边界处理！很多时候都会遇到边界处理
currentPos = total-1;
}
// 下一页（要有一个数组存放图片的集合！）；
oImg.src = "img/" + imgs[currentPos];
changeInfo(oInfo,total,currentPos)
}
}
</script>
</head>
<body>
<div class="outer">
<p id ="info">info</p>
<img src="img/1.jpg" />
<button id="pre">上一张</button>
<button id= 'next'>下一张</button>
<p class="p1"><button id="start">开始/暂停（自动播放）</button></p>
</div>
<!-- 块状元素里面包含这个行内元素， 那么 若一样包裹不了，它就换行，它也是比较灵活！ -->
<!-- <div class="test">
<span>sdf;lsdjfs</span>
<span>sdf;lsdjfs</span>
<span>sdf;lsdjfs</span>
<span>sdf;lsdjfs</span>
<span>sdf;lsdjfs</span>
<span>sdf;lsdjfs</span>
<span>sdf;lsdjfs</span>
</div> -->
</body>
</html>