动画轮播图具体的思路：
1、把所有能用到的标签全部获取到
2、动态生成结构：按钮li
- 根据ul 中的li 动态生成ol中的li，ul中有几个li 生成ol中几个li
- 设置li中的文本，把li追加到ol中
- 获取ol中的li
- 根据第一张图，动态克隆，并追加到ul最后
3、鼠标经过按钮，移动ul到指定的位置
- 鼠标经过按钮，按钮排他（干掉所有人，留下我自己）
- 经过按钮，ul移动到指定位置
- 指定位置：-this.index * imgWidth和当前按钮的索引以及图片的宽度有关，向左移动是负数①设置索引②取图片的宽度③调用动画函数
4、鼠标点击箭头
- 显示出箭头
- 点击右箭头，把ul移动到指定位置
①鼠标点击事件
②ul移动到指定位置：-index * imgWidth 和图片索引和图片宽度有关
③判断图片移动到最后一张后（假的第一张），瞬间调到开头，然后做从第一张到第二张的动画
ulObj.style.left = 0; //瞬间移动到开头
index = 0;//索引后归零，后续让ul从第一张渐渐移动到第二张 - 点击左箭头，当图片移动到第一张后，瞬间跳到最后，然后做从最后一张到倒数第二张的动画
5、按钮也要跟着左右箭头移动
- 根据当前图片的索引，计算出下一个应该亮起的按钮的索引 干掉所有人、、留下相应的
6、添加自动滚动
- 每隔一秒播放下一张（让点击右箭头的事件每隔一秒执行一次）
- 鼠标放在图片上自动滚动停止，离开后继续自动滚动 鼠标经过图片清除自动滚动，离开时继续自动滚动
- 在图片自动滚动时，经过按钮放开后，图片会接着自动滚动时的顺序继续滚动，而不是从经过按钮的图片开始滚动：把记录显示按钮的索引变为当前按钮的索引
- 把记录显示图片的索引变为当前图片的索引
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 200px;
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: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: #DB192A;
}
#arr {
display: none;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id='box'>
<div class="screen"><!--相框-->
<ul>
<li><img src="images/1.jpg" width="500" height="200"/></li>
<li><img src="images/2.jpg" width="500" height="200"/></li>
<li><img src="images/3.jpg" width="500" height="200"/></li>
<li><img src="images/4.jpg" width="500" height="200"/></li>
<li><img src="images/5.jpg" width="500" height="200"/></li>
</ul>
<ol>
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<script>
//把所有能用到的标签全部获取到
var box = my$('box');
var screen = box.querySelector('.screen');
var width = screen.offsetWidth;
var ulObj = screen.getElementsByTagName('ul')[0];
var liList = ulObj.getElementsByTagName('li');
var olObj = screen.getElementsByTagName('ol')[0];
var arr = my$('arr');
var hh = 0;
// 动态生成结构 生成ol下的li
for (var i = 0; i < liList.length; i++) {
var liobj = document.createElement('li');
liobj.innerText = i + 1;
olObj.appendChild(liobj);
// 添加索引
liobj.setAttribute('index', i);
//ol下的li注册移入事件
liobj.onmouseover = function () {
var liObjs = olObj.children;
for (var j = 0; j < liObjs.length; j++) {
liObjs[j].removeAttribute('class');
}
this.className = 'current';
hh = this.getAttribute('index');
animate(ulObj, -hh * width);
}
}
olObj.children[0].className = 'current';
//根据第一张图，动态克隆，并追加到ul最后
ulObj.appendChild(liList[0].cloneNode(true));
// 每一段时间播放下一张（让点击右箭头的事件每隔一秒执行一次）
var timeId=setInterval(clickHandle,2000);
// 左右焦点按钮 移动图片
box.onmouseover = function () {
arr.style.display = 'block';
clearInterval(timeId);
}
box.onmouseout = function () {
arr.style.display = 'none';
clearInterval(timeId);
timeId=setInterval(clickHandle,2000);
}
my$('right').onclick = clickHandle;
// 右键点击之后的函数封装
function clickHandle() {
// 判断图片移动到最后一张后，设置left从头开始
if (hh == liList.length-1) {
hh=0;
ulObj.style.left = '0px';
}
hh++;
animate(ulObj, -hh * width);
// 按钮也要跟着左右箭头移动
if (hh == liList.length-1) {
olObj.children[hh-1].removeAttribute('class');
olObj.children[0].className='current';
}else {
for (var i=0;i<olObj.children.length;i++){
olObj.children[i].removeAttribute('class');
}
olObj.children[hh].className='current';
}
}
my$('left').onclick=function () {
//当图片移动到第一张后，瞬间跳到最后，然后做从最后一张到倒数第二张的动画
if (hh==0){
hh=liList.length-1;
ulObj.style.left = -hh*width+'px';
}
hh--;
animate(ulObj, -hh * width);
// 按钮也要跟着左右箭头移动，根据当前图片的索引，计算出下一个应该亮起的按钮的索引
for (var i=0;i<olObj.children.length;i++){
olObj.children[i].removeAttribute('class');
}
olObj.children[hh].className='current';
}
/**
* 移动任意的元素到任意的位置
* @param element 要移动的元素
* @param target 目标值
*/
function animate(element, target) {
clearInterval(element.timeId);
element.timeId = setInterval(function () {
var current = element.offsetLeft;
// 按钮也要跟着左右箭头移动，根据当前图片的索引，计算出下一个应该亮起的按钮的索引
var step = current > target ? -10 : 10;
current += step;
if (Math.abs(target - current) < Math.abs(step)) {
//走最后一步后current超过目标（向右）或小于目标（向左）
clearInterval(element.timeId);
element.style.left = target + 'px';
} else {
element.style.left = current + 'px';
}
}, 10);
}
function my$(id) {
return document.getElementById(id);
}
</script>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
