星之书笔记刚开始学JavaScript时候很多新手都会尝试写一些简单的小项目，轮播图应该是写的最多的。但是很多时候对于基础不是很好的新手，虽然参照别人的代码能写出来一些轮播图，但其中的一些细节和过程可能还是一知半解甚至不懂，这里为大家介绍一种简单的原生JS轮播图写法。
效果图：
HTML代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,user-scalable=no"> <title>My web</title> </head> <body> <div id='all'> <div> <ul> <li><img src="img/certify01.png" width="100%" height="200" /></li> <li><img src="img/certify02.png" width="100%" height="200" /></li> <li><img src="img/certify03.png" width="100%" height="200" /></li> <li><img src="img/certify04.png" width="100%" height="200" /></li> <li><img src="img/certify05.png" width="100%" height="200" /></li> </ul> </div> <ol></ol> </div> </body> </html>
css代码：
*{padding:0;margin:0;list-style:none;}
.all{width:366px;height:200px;border:1px solid #dfdfdf;position:relative;margin:0 auto;margin-top:100px;}
.screen{width:100%;height:100%;overflow:hidden;position:relative;}
.screen li{width:366px;height:100%;overflow:hidden;float:left;}
.screen ul{position:absolute;left:0;top:0px;width:3000px;}
.all ol{position:absolute;right:10px;bottom:10px;line-height:20px;text-align:center;}
.all ol li{float:left;width:15px;height:15px;background:rgba(0,0,0,.6);margin-left:5px;cursor:pointer;font-size:10px;font-family:Verdana;line-height:15px;border-radius:15px;}
.all ol li.current{background:yellow;}
js代码：
window.onload= function() {
var box = document.getElementById("all"); // 获得大盒子
var ul = box.children[0].children[0]; // 获取ul
var ulLis = ul.children; // ul 里面的所有 li
//1. ulLis[0].cloneNode(true) 克隆 节点
ul.appendChild(ulLis[0].cloneNode(true)); // ul 是 a ulLis[0].cloneNode(true) 是b
//2. 插入 ol 里面的li
var ol = box.children[1]; // 获得ol
// 因为 我们要创建很多个 ol 里面的li 所以需要用到for 循环哦
for(var i=0;i<ulLis.length-1;i++) { // ul 里面的li 长度 要减去 1 因为我们克隆一个
// 创建节点 li
var li = document.createElement("li");
li.innerHTML = i + 1; // 存在加1 的关系
// a.appendChild(b);
ol.appendChild(li);
}
var olLis = ol.children; // 找到 ol 里面的li
olLis[0].className = 'current';
// 3. 动画部分 遍历小li ol
for(var i=0;i<olLis.length;i++) {
olLis[i].index = i; // 赋予索引号
olLis[i].onmouseover = function() {
// 清除所有
for(var j=0;j<olLis.length;j++) {
olLis[j].className = "";
}
this.className = 'current';
animate(ul,-this.index*ulLis[0].offsetWidth);
key = square = this.index; // 鼠标经过 key square 要等于 当前的索引号
}
}
// 4. 定时器部分 难点
var timer = null; // 定时器
var key = 0; // 用来控制图片的播放的
var square = 0; // 用来控制小方块的
timer = setInterval(autoplay,3000); // 每隔3s 调用一次 autoplay
function autoplay() {
key++; // key == 1 先 ++
console.log(key); // 不能超过5
if(key > ulLis.length - 1)
{
// alert('停下');
ul.style.left = 0;
key = 1; // 因为第6张就是第一张，我们已经播放完毕了， 下一次播放第2张
// 第2张的索引号是1
}
animate(ul,-key*ulLis[0].offsetWidth);
// 小方块的做法
square++; // 小方块自加1
square = square>olLis.length-1 0 : square;
/// 清除所有人
for(var i=0;i<olLis.length;i++) {
olLis[i].className = "";
}
olLis[square].className = "current"; // 留下当前自己的
}
// 鼠标经过和停止定时器
box.onmouseover = function() {
clearInterval(timer);
}
box.onmouseout = function() {
timer = setInterval(autoplay,3000); // 一定这么开
}
// 基本封装
function animate(obj,target) {
clearInterval(obj.timer); // 要开启定时器，先清除以前定时器
// 有2个参数 第一个 对象谁做动画 第二 距离 到哪里
// 如果 offsetLeft 大于了 target 目标位置就应该反方向
var speed = obj.offsetLeft < target 15 : -15;
obj.timer = setInterval(function() {
var result = target - obj.offsetLeft; // 他们的值 等于 0 说明完全相等
// 动画的原理
obj.style.left = obj.offsetLeft + speed + "px";
if(Math.abs(result) <= 15) {
obj.style.left = target + "px"; //抖动问题
clearInterval(obj.timer);
}
},10);
}
}
