主要涉及知识点，元素的获取，计时器，开关锁，速度位子的变化
1.设计思路
轮播图设计思路，控制ul在一定时间内，向右移动一个 li 宽度的距离，从而展示相应 li 的图片内容，当移动到最后一个li时，迅速让其坐标归0，从新开始循环。
添加向左或向右按钮，绑定点击按钮与ul的关系，当点击向左时，ul + 一个 li 的宽度，当点击向右时，ul - 一个 li 的宽度，当ul在最左侧时候，让其坐标点迅速变成最有一个 li，开始循环。
添加轮播图下方小点，创建一个计数器，绑定到 ul 上，当ul 向右移动时，计数器++，到最后一个 li 时候，计数器 归 0，当ul向左移动时 计数器--；到最左侧第一个 li 时，迅速赋值为 最后一位，开始循环。
添加小点点击事件，for循环所有小点，当点击到当前 小点时，控制ul移动到 当前对应 li 位子上。
2.HTML,CSS方面
css
*{
padding: 0px;
margin: 0px;
list-style: none;
}
.warpper{
position: relative;
width: 400px;
height: 300px;
margin: 100px auto 0;
overflow: hidden;
}
.warpper .sliderPage{
position: absolute;
left: 0px;
top: 0px;
width: 2000px;
height: 300px;
}
.warpper .sliderPage li{
width: 400px;
height: 300px;
float: left;
}
.warpper .sliderPage li img{
width: 100%;
height: 100%;
}
.warpper .btn{
position: absolute;
top: 50%;
margin-top: -20px;
width: 40px;
height: 40px;
font-size: 30px;
color: #ccc;
text-align: center;
background: #000;
opacity: 0.2;
cursor: pointer;
}
.warpper .btn:hover{
opacity: 0.6;
}
.warpper .leftbtn{
left: 10px;
}
.warpper .rightbtn{
right: 10px;
}
.warpper .sliderIndex{
position: absolute;
width: 100%;
bottom: 15px;
text-align: center;
cursor: pointer;
}
.warpper .sliderIndex span{
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #555;
margin-right: 10px;
}
.warpper .sliderIndex .active{
background-color: red;
}
html5
<div class="warpper">
<ul class="sliderPage">
<li><img src="./tu1.jpg" alt=""></li>
<li><img src="./tu2.jpg" alt=""></li>
<li><img src="./tu3.jpg" alt=""></li>
<li><img src="./tu4.jpg" alt=""></li>
<li><img src="./tu1.jpg" alt=""></li>
</ul>
<div class="btn leftbtn"><</div>
<div class="btn rightbtn">></div>
<div class="sliderIndex">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>3.JS方面
1.书写运动代码
//获取元素属性的封装方法
function getStyle (obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
}else {
return window.getComputedStyle(obj, false)[attr];
}
}
//运动事件函数
function startMove (obj, data, func) {
clearInterval(obj.timer);
var iSpeed; //速度
var iCur;
var name;
startTimer = obj.timer = setInterval(function () {
var bStop = true;
//遍历 data
for (var attr in data) {
if (attr === 'opacity') {
name = attr;
//当 data 内属性 是 opacity时,数值扩大100倍
iCur = parseFloat(getStyle(obj, attr)) * 100;
}else {
iCur = parseInt(getStyle(obj, attr));
}
// 当前属性值 减去 原属性值
iSpeed = ( data[attr] - iCur) / 5;
// 速度 大于0 向上取整， 小于0，向下取整
if (iSpeed > 0) {
iSpeed = Math.ceil(iSpeed);
}else {
iSpeed = Math.floor(iSpeed);
}
// 当属性为 opacity时，赋值时 值缩小100倍
if (attr === 'opacity') {
obj.style.opacity = ( iCur + iSpeed ) / 100;
}else {
obj.style[attr] = iCur + iSpeed + 'px';
}
if ( Math.floor(Math.abs(data[attr] - iCur)) != 0 ) {
//当速度不为0时，不停止
bStop = false;
}
}
// 当bStop为true时， 清除定时器
if (bStop) {
clearInterval(obj.timer);
if (name === 'opacity') {
obj.style.opacity = data[name] / 100;
}
func();
}
},30);
} 2.书写轮播图代码
分为四步，第一部先写自动向右，第二部添加两侧按钮，第三部添加底部小点效果，第四部添加小点点击事件。
var timer = null;
var sliderPage = document.getElementsByClassName('sliderPage')[0];//获取ul
var moveWidth = sliderPage.children[0].offsetWidth;//获取li宽度
var num = sliderPage.children.length - 1;//获取li数量
var leftBtn = document.getElementsByClassName('leftBtn')[0];//获取左侧点击
var rightBtn = document.getElementsByClassName('rightBtn')[0];//获取右侧点击
var oSpanArray = document.getElementsByClassName('sliderIndex')[0].getElementsByTagName('span');//获取底部小点
var lock = true;//加锁
var index = 0;//小点计数器
//第一步，向左向右翻动
// direction 控制方向
//默认轮播方向/right按钮 'left->right' / undefined
//点击left按钮 'right->left'
function autoMove (direction) {
// 当锁开时执行
if (lock) {
lock = false;
clearTimeout(timer);
// 当方向不存在，或者左向右时，ul减去一个li的宽度
if (!direction || direction == 'left->right') {
index++;
startMove(sliderPage, {left: sliderPage.offsetLeft - moveWidth}, function () {
//当ul 在最后一个li 时，让其位子归0，计数器归0
if (sliderPage.offsetLeft == - num * moveWidth) {
index = 0;
sliderPage.style.left = '0px';
}
// 计时器开启，锁开启，小点变化
timer = setTimeout(autoMove, 1500);
lock = true;
changeIndex(index);
});
//当右向左时， 在ul在第一个li 位子，就让其赋值到最后一个li位子，计数器也赋值到最后一个li
}else if (direction == 'right->left') {
if (sliderPage.offsetLeft == 0) {
sliderPage.style.left = - num * moveWidth + 'px';
index = num;
}
//右向左 计数器 --， ul 加上一个 li的宽度
index--;
startMove(sliderPage, {left: sliderPage.offsetLeft + moveWidth}, function () {
//计时器开启，锁开启，小点变化
timer = setTimeout(autoMove, 1500);
lock = true;
changeIndex(index);
})
}
}
}
//第二步，添加左右点击按钮
leftBtn.onclick = function () {
autoMove('right->left');
}
rightBtn.onclick = function () {
autoMove('left->right');
}
//第三步，添加小点变化
function changeIndex (_index) {
for (var i = 0; i < oSpanArray.length; i++) {
//循环所有小点样式取消
oSpanArray[i].className = '';
}
//当前小点 添加样式
oSpanArray[_index].className = 'active';
}
//第四步，添加小点点击事件
for (var i = 0; i < oSpanArray.length; i++) {
(function (myIndex) {
oSpanArray[i].onclick = function () {
//点击当前小点时，锁关闭，定时器清除，计数器赋值当前位子，运动到当前位子得li上
lock = false;
clearTimeout(timer);
index = myIndex;
startMove(sliderPage, {left: - index * moveWidth}, function () {
// 点击事件结束， 锁开启，定时器启动，小点变化
lock = true;
timer = setTimeout(autoMove, 1500);
changeIndex(index);
})
}
})(i)
}
timer = setTimeout(autoMove, 1500);