轮播图
轮播图分类：滚动轮播图、呼吸轮播图、非主流轮播图
滚动轮播图，它是一个长长的盒子（ul），横着或者竖着，然后从一头拖到另一头（控制定位的left或者top），父盒子就那么大，溢出隐藏（overflow:hidden）这样一来，我们只能看到它的一部分，也就是它的一个儿子。
呼吸轮播图，把所有图片定位到一起，全在一个位置，只不过你看不见（display:none）,然后通过修改display来出现或消失。
非主流的轮播图，我的博客里有纯css的轮播图
今天就讲讲滚动轮播图......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
margin: 100px auto;
border: 5px solid greenyellow;
border-radius: 5px;
position: relative;
overflow: hidden;
}
* {
margin: 0;
padding: 0;
}
ul,
ol,
li {
margin: 0;
padding: 0;
list-style: none;
}
img {
width: 100%;
height: 100%;
}
.hello {
width: 600%;
height: 100%;
position: absolute;
left: 0;
}
.hello li {
width: 300px;
height: 100%;
float: left;
}
.btn {
width: 300px;
height: 30px;
position: absolute;
top: 135px;
display: none;
}
.btn .left,
.btn .right {
width: 30px;
height: 30px;
border-radius: 50%;
float: left;
border: 3px solid skyblue;
}
.btn .right {
float: right;
}
.dian {
width: 90px;
height: 10px;
position: absolute;
top: 260px;
left: 105px;
}
.dian li {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: tan;
margin-right: 10px;
float: left;
}
.dian li:first-child {
background-color: tomato;
}
.dian li:last-child {
margin-right: 0;
}
</style>
</head>
<body>
<div class="box">
<ul class="hello">
<li><img src="巧儿001.jpg" alt=""></li>
<li><img src="巧儿002.jpg" alt=""></li>
<li><img src="巧儿003.jpg" alt=""></li>
<li><img src="张功001.jpg" alt=""></li>
<li><img src="i_98.jpg.png" alt=""></li>
<li><img src="巧儿001.jpg" alt=""></li>
</ul>
<ol class="btn">
<li class="left"></li>
<li class="right"></li>
</ol>
<ol class="dian">
<li index="0"></li>
<li index="1"></li>
<li index="2"></li>
<li index="3"></li>
<li index="4"></li>
</ol>
</div>
<script>
var btn = document.getElementsByClassName("btn")[0];
var box = document.getElementsByClassName("box")[0];
var hello = document.getElementsByClassName("hello")[0];
var lans = document.querySelectorAll(".btn .left,.btn .right,.dian li");
var dianlis = document.querySelectorAll(".dian li");
var timer;
var index = 0;
//鼠标悬停在ele1才会把ele2显示出来
function aaa(ele1, ele2) {
ele1.addEventListener("mouseenter", function() {
ele2.style.display = "block";
});
ele1.addEventListener("mouseleave", function() {
ele2.style.display = "none";
});
}
function easaymove(ele, target, fn) {
clearInterval(timer);
timer = setInterval(function() {
var c = ele.offsetLeft;
var step = Math.ceil(Math.abs(parseInt(target) - c) / 10);
if (c > parseInt(target)) {
step = -step;
}
ele.style.left = c + step + "px";
if (c == parseInt(target)) {
clearInterval(timer);
}
}, 40);
if (Object.prototype.toString.call(fn) == "[object Function]") {
fn();
}
}
function lan() { //函数名叫做懒
if (this.className == "left") {
if (index != 0) {
index--;
} else {
hello.style.left = -1500 + "px";
index = 4;
}
} else if (this.className == "right") {
if (index != 5) {
index++;
} else {
hello.style.left = 0 + "px";
index = 1;
}
} else {
if (index == 5) {
hello.style.left = 0 + "px";
}
index = +this.getAttribute("index");
}
easaymove(hello, -index * 300 + "px", function() {
Array.prototype.forEach.call(dianlis, function(value, i) {
if (i == index) {
value.style.backgroundColor = "tomato";
} else {
value.style.backgroundColor = "tan";
}
});
if (index == 5) {
dianlis[0].style.backgroundColor = "tomato";
}
});
}
for (var i = 0; i < lans.length; i++) {
lans[i].onclick = lan;
}
aaa(box, btn);
</script>
</body>
</html>
代码就放在上面，
首先你要给页面布局，版心，外层盒子，里面的ul包着一堆li，
布局找个tu照着布就可以了，两个按钮，一左一右，横着的话li要浮动~
1.把所有用到的元素拿到手，然后命个名
2.封装一个函数,让ul动起来
3.绑定按钮的事件