最下方有源码文件！！！！
这里面我封装了一个animate.js这个js代码主要实现的是ul的移动,按钮事件处理函数中的代码(让一个元素,从左往右,或者从右往左缓慢移动)（可参考之前写的简单动画案例）
animate.js代码
//封装 按钮事件处理函数中的代码(让一个元素,从左往右,或者从右往左缓慢移动)
/*
* 作用: 让一个元素,从左往右,或者从右往左缓慢移动
* element: 要求传入一个元素 元素
* target : 元素移动的目标位置 数字
* step: 步进(每次元素移动的距离)
* callback : 回调函数 到达目标位置之后,会被调用
* */
function animate(element, target, step, callback){
// 清除定时器
if(element.timeid){
clearInterval(element.timeid);
}
// 1. 设置定时器
element.timeid = setInterval(function(){
// 2. 获取元素的当前位置
var current = element.offsetLeft;
// 3. 根据当前位置加上/减去我们的步进
// 如果当前位置大于目标位置,就是减去步进.否则就是加上步进
if(current > target){
// 证明是从右往左,应该减去step
var pos = current - step;
}else{
// 证明是从左往右,应该加上step
var pos = current + step;
}
// 4. 给element赋值新的位置
element.style.left = pos + \'px\';
// 5. 判断是否到达目标位置,如果到达目标位置就停下来
// 5.1 如何判断已经到达目标位置
// 如果 当前位置(赋值之后的位置 pos)- 目标位置 的差值绝对值,小于步进,证明马上要到目标位置了
if(Math.abs(pos - target) <= step){
//证明马上就要到达目标位置了
// 5.2 清除定时器,直接把目标位置给元素
clearInterval(element.timeid);
element.style.left = target + \'px\';
//判断用户有没有传第四个参数,如果传了就调用,如果没传就不调用
// 如果传入了函数,callback转换成布尔就是true,如果什么都没传,callback转换成布尔,就是false
if(callback){
callback();
}
}
}, 15);
} 在 轮播图.html中填入（style代码，盒子代码（放在body里面），script代码）
style代码
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 300px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 300px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0px;
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: yellow;
}
#arr {
display: none;
z-index: 1000;
}
#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> 盒子代码
<div class="all" id=\'box\'>
<div class="screen" id="screen">
<ul>
<li>
<img src="images/1.jpg" width="500" height="300"/>
</li>
<li>
<img src="images/2.jpg" width="500" height="300"/>
</li>
<li>
<img src="images/3.jpg" width="500" height="300"/>
</li>
<li>
<img src="images/4.jpg" width="500" height="300"/>
</li>
<li>
<img src="images/5.jpg" width="500" height="300"/>
</li>
</ul>
<ol>
</ol>
</div>
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div> script代码
<script src="animate.js"></script>
<script>
//需求:
// 1. 根据ul中li的个数,动态的创建出ol中的li(数字按钮)
// 1.1 获取元素 ul, ul里面的li, ol
var screen = document.getElementById(\'screen\');
var ul = screen.getElementsByTagName(\'ul\')[0];
var lis = ul.children;
var ol = screen.getElementsByTagName(\'ol\')[0];
var indexGlobal = 0; //用于存储当前展示的是哪张图片的下标
// 1.2 遍历ul里面的li
for (var i = 0; i < lis.length; i++) {
// 1.3 在遍历的过程中,动态的创建ol中的li,然后把新创建的li放到ol中
var li = document.createElement(\'li\');
//由于点击的时候,需要获取当前li的下标,所以在创建的时候就存储一下
li.setAttribute(\'index\', i);
// 1.4 给每一个数字按钮,添加数字
li.innerText = i + 1;
//1.5 默认一打开,展示第一个图片,所以要给数字按钮1默认高亮
if (i == 0) {
// li.style.backgroundColor = \'yellow\';
li.className = \'current\';
}
ol.appendChild(li);
// 2. 点击数字按钮,让轮播图滚动(修改ul的left).
// 2.1 获取元素 ol里面的li
// 2.2 给每一个ol中的li注册点击事件
li.onclick = fn;
}
//要实现无缝轮播的效果,需要克隆第一张图放到最后面
// 注意:一定要在数字按钮,创建完毕之后在克隆
var newone = lis[0].cloneNode(true);
ul.appendChild(newone);
console.log(lis);
// 数字按钮li的事件处理函数
function fn() {
// 2.3 在事件处理函数中,修改ul的left
// 2.3.1 目标值是多少?
// 目标值 = 当前图片的下标 * 图片的宽度
// 目标值 = 数字按钮的下标(this.getAttribute(\'index\') * screen的宽度(screen.offsetWidth)
// console.log(this);
var target = this.getAttribute(\'index\') * screen.offsetWidth;
// 2.3.2 将目标值赋值为ul, 注意值是负值
// ul.style.left = -target + \'px\'; //直接到了目标位置
//我们需要慢慢滚动过去
animate(ul, -target, 20);
// 2.4 点击哪个数字按钮,就让谁高亮
//排他
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = \'\';
}
this.className = \'current\';
// /动态的修改indexGlobal的值,因为indexGlobal要时刻和展示的图片的下标保持一致
indexGlobal = this.getAttribute(\'index\');
console.log(indexGlobal);
}
//3. 鼠标移入到box中,arr展示,鼠标移出到box外,arr消失
//3.1 获取元素
var box = document.getElementById(\'box\');
var arr = document.getElementById(\'arr\');
// 3.2 给box注册鼠标移入,移出事件
box.onmouseenter = function () {
// 3.3 移入事件,arr展示
arr.style.display = \'block\';
// 7.1 鼠标移入停止自动轮播
clearInterval(timeid);
}
box.onmouseleave = function () {
// 3.5 移出事件,arr消失
arr.style.display = \'none\';
//7.2 鼠标移出,开始自动轮播
timeid = setInterval(function(){
right.onclick();
}, 3000); //注意: 自动轮播的时间不能太短,因为图片滚动也需要时间
}
//4. 点击右边的arr,滚动到下一张图
// 4.1 获取元素
var right = document.getElementById(\'right\');
// 4.2 给right注册点击事件
right.onclick = function () {
// 4.3 在事件处理函数中,滚动到下一张图
// 4.3.1 当前是哪一张? 通过indexGlobal获取到当前的下标
// 4.4 判断当前是否是第5张图,如果是第5张图,就需要自己写代码,慢慢滚动到第6张
if(indexGlobal == ol.children.length - 1){
//证明是第5张,需要自己写代码,滚动过去,实现高亮
// 4.4.1 滚动到第6张
indexGlobal++;
//计算展示第6张图,ul应该处于的位置
var target = indexGlobal * screen.offsetWidth;
animate(ul,-target, 20, function(){
//4.4.2 滚动到第6张之后,要立刻跳到第一张
ul.style.left = \'0px\';
//indexGlobal应该和展示的图片保持一致
indexGlobal = 0;
});
// 4.4.3 实现高亮
//排他
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = \'\';
}
ol.children[0].className = \'current\';
}else{
// 4.3.2 根据当前找到下一个数字按钮,触发数字按钮的点击事件
indexGlobal++;
// console.log(ol.children[indexGlobal]);
ol.children[indexGlobal].onclick();
}
}
// 5. 点击左边的arr,滚动到上一张图
// 5.1 获取元素
var left = document.getElementById(\'left\');
// 5.2 给left注册点击事件
left.onclick = function(){
// 5.3 在事件处理函数中,根据当前的图片,展示上一张
//5.3.1 判断当前展示的是不是第一张,如果是第一张,直接跳到最后一张,然后滚动到第5张
if(indexGlobal == 0){
//直接跳到最后一张
indexGlobal = ol.children.length;
ul.style.left = -indexGlobal * screen.offsetWidth + \'px\';
//然后再滚动到第五张
indexGlobal--;
ol.children[indexGlobal].onclick();
}else{
indexGlobal--;
ol.children[indexGlobal].onclick();
}
}
// 6. 让轮播图自动轮播
var timeid = setInterval(function(){
right.onclick();
}, 3000); //注意: 自动轮播的时间不能太短,因为图片滚动也需要时间
</script> 源码连接
https://www.lanzous.com/i7enozi
密码:c851