javascript 轮播图（缓存效果）详细篇
对现在的我来说，这样的操作还是有点麻烦，综合使用的话还是有很多毛病，话不多说，做一个上下平移的轮播图（纯js），因为不会，所以可能比较冗余，以便复习到更多知识点
过程
1、生出数字按钮，就是呢个代表着图片的小圆点，就暂且当图片不知道几张
1.1通过获取图片数量用for（）循环，最后的结果是ul>li>1\2\3\4的效果
2、按钮移动切换
3.1：当鼠标移动到图片对应的数字按钮时
3.2：初始化状态
3、初始化状态，包括两个部分
2.1：当前图片对应的数字显示不一样的样式
2.2：图片特效函数，参数是根据下标即数字按钮获得不同的长度，用作上或下移动的距离，可以通过 “-” 改变上或下的方向（最好在全部步骤完成后书写）
4、通过 playTimer = setInterval(next, 3000);每三秒更换数字,并修改样式
4.1:通过下标设置自动改变方向
4.2:初始化状态
5、鼠标移入展示区停止自动播放（clearInterval(playTimer)）
6、鼠标离开展示区开始自动播放（playTimer = setInterval(next, 3000) ）
实例：轮播图之缓存效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自动播放——幻灯片缓冲效果</title>
<style type="text/css">
body,
li,
ul,
div {
padding: 0;
margin: 0;
}
body {
background: #000000;
text-align: center;
font: 12px/20px Arial;
}
#box {
position: relative;
width: 492px;
height: 172px;
background: #fff;
border-radius: 5px;
border: 8px solid #fff;
margin: 10px auto;
cursor: pointer;
}
#box .list {
position: relative;
width: 490px;
height: 170px;
overflow: hidden; /* 删除显示区域 */
}
#box .list ul {
position: absolute;
top: 0;
left: 0;
}
#box .list li {
/* li上下之间有间隙，设置高度之后可以清楚 */
width: 490px;
height: 170px;
overflow: hidden;
}
#box .list li {
width: 490px;
height: 170px;
overflow: hidden;
}
#box .count {
position: absolute;
right: 0;
bottom: 5px;
}
#box .count li {
color: #fff;
float: left;
width: 20px;
height: 20px;
cursor: pointer;
margin-right: 5px;
overflow: hidden;
background: #F90;
opacity: 0.7;
filter: alpha(opacity=70);
border-radius: 20px;
}
#box .count li.current {
color: #fff;
opacity: 1;
filter: alpha(opacity=100);
font-weight: 700;
background: #f60;
}
</style>
<script type="text/javascript">
window.onload = function() {
var oBox = document.getElementById("box");
var oList = oBox.getElementsByTagName("ul")[0];
var aImg = oBox.getElementsByTagName("img");
var timer = playTimer = null;
var index = i = 0;
var bOrder = true; /* order命令；顺序；规则 */
var aTmp = []; /* temporary暂时的 */
var aBtn = null;
//生成数字按钮
for (var i = 0; i < aImg.length; i++) {
aTmp.push("<li>" + i + "</li>")
// console.log(aTmp); /* 获取li>1\2\3\4\5 */
}
//创建数字按钮格式
var oUl = document.createElement("ul");
oUl.className = "count"
oUl.innerHTML = aTmp.join(""); /* 将数组直接输入 */
oBox.appendChild(oUl);
//获取创建节点的li
oBtn = oBox.getElementsByTagName("ul")[1].getElementsByTagName("li");
for (var i = 0; i < oBtn.length; i++) {
oBtn[i].index = i;
oBtn[i].onmouseover = function() {
//初始化
index = this.index
initial()
}
}
//初始化
function initial() {
for (var i = 0; i < oBtn.length; i++) {
oBtn[i].className = "";
oBtn[index].className = "current";
/* 注意是index，上面已经定义了index=0；
所以其实就是改变第一个的样式，而调用后index改变*/
//图片特效
startMove(-(index * aImg[0].offsetHeight))
}
}
//缓存效果,即图片移动逐渐变得缓慢
function startMove(imgTop) {
// 不加的图片不停闪烁,加载timer后的话,没有特效
clearInterval(timer); /* timer定时器 */
timer = setInterval(function() {
var speed= (imgTop - oList.offsetTop) / 10;
/* 使speed变小，不然假如speed=1000px，直接就换页了，就没缓冲效果
即被除数（10）越大，缓冲效果越明显
*/
if(speed>0){
speed=Math.ceil(speed);
}else{
speed=Math.floor(speed);
}
console.log(speed)
/* 缓冲的效果就是在这里实现的，我们将速度的大小与当前位置与终点之间的距离成正比，那么距离越小，速度也越小，
此外一定要注意这里我们要对速度进行向上，或者向下取整，而且对于正数我们要向上取整，对于负速度，我们要向下取整。 */
if(oList.offsetTop == imgTop){
clearInterval(timer)
}else{
oList.style.top = oList.offsetTop + speed + "px";
/* 由上可知，无论是上下，当距离越近时，speed的值越小，即上或下的速度越来越慢 */
}
}, 30)
}
initial()
//第一个时,最后一个时，判定,效果就是从1-5,然后从5-1
function next() {
bOrder ? index++ : index--;
if (index <= 0) {
index = 0;
bOrder = true;
}
if (index >= oBtn.length - 1) {
index = oBtn.length - 1;
bOrder = false
}
initial()
}
//每三秒更换数字,并修改样式
playTimer = setInterval(next, 3000);
//鼠标移入展示区停止自动播放
oBox.onmouseover = function() {
clearInterval(playTimer)
};
//鼠标离开展示区开始自动播放
oBox.onmouseout = function() {
playTimer = setInterval(next, 3000)
};
}
</script>
</head>
<body>
<div id="box">
<!-- 白色拼屏幕 -->
<div class="list">
<!-- 显示的图片 -->
<ul>
<li><img src="img/01.jpg" width="490" height="170" /></li>
<li><img src="img/02.jpg" width="490" height="170" /></li>
<li><img src="img/03.jpg" width="490" height="170" /></li>
<li><img src="img/04.jpg" width="490" height="170" /></li>
<li><img src="img/05.jpg" width="490" height="170" /></li>
</ul>
<!-- 数字按钮格式 -->
<!-- <ul class="count">
<li>1</li>
</ul> -->
</div>
</div>
</body>
</html>
