<!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>
* {
margin: 0;
padding: 0;
}
ul, li, ol {
list-style: none;
}
.slider {
width: 590px;
height: 470px;
border: 1px solid #eee;
margin: 100px auto;
padding: 5px;
position: relative;
}
.inner {
width: 590px;
height: 470px;
background: pink;
position: relative;
overflow: hidden;
}
.inner img {
display: block;
width: 590px;
height: 470px;
}
.inner ul {
width: 800%;
position: absolute;
top: 0;
left: 0;
}
.inner li {
float: left;
}
.slider ol {
position: absolute;
left: 50%;
margin-left: -80px;
bottom: 10px;
}
.slider ol li {
float: left;
width: 18px;
height: 18px;
background: #fff;
margin-right: 10px;
text-align: center;
line-height: 18px;
}
.slider ol li.current {
background: coral;
cursor: pointer;
}
</style>
</head>
<body>
<div class="slider" id="slider">
<div class="inner">
<ul>
<li><a href="#"><img src="../../images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="../../images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="../../images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="../../images/4.jpg" alt=""></a></li>
<li><a href="#"><img src="../../images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="../../images/2.jpg" alt=""></a></li>
</ul>
</div>
</div>
</body>
<script>
// 获得元素
var slider = document.getElementById("slider");
var ul = slider.children[0].children[0];
var ullis = ul.children;
// 1、动态复制最后一张图
ul.appendChild(ullis[0].cloneNode(true));
// 2、动态生成小圆点
var ol = document.createElement("ol");
slider.appendChild(ol);
for (var i = 0; i < ullis.length - 1; i++) {
var li = document.createElement("li");
li.innerHTML = i + 1;
ol.appendChild(li);
}
ol.children[0].setAttribute("class", "current");
// 3、鼠标经过小圆点 圆点事件
var ollis = ol.children;
for (var i = 0; i < ollis.length; i++) {
ollis[i].index = i; // 自定义属性
ollis[i].onmouseover = function () {
for (var j = 0; j < ollis.length; j++) { // 去掉所有小圆点的class
ollis[j].removeAttribute("class");
}
ollis[this.index].setAttribute("class", "current"); // 保留当前小圆点的class
// 图片动画
animate(ul, -this.index * ullis[0].offsetWidth);
key = point = this.index; // 从当前开始动画
}
}
// 缓动动画函数
var leader = 0;//缓动动画变量
function animate(obj, target) {
clearInterval(obj.timer); // 清除定时器
/*定时任务,缓动轮播 30毫秒到target位置*/
obj.timer = setInterval(function () {
leader = leader + (target - leader) / 10;//缓动动画公式
obj.style.left = leader + "px";
}, 10);
}
// 4、轮播图定时器
var timer = null;
timer = setInterval(autoplay, 3000);
var key = 0; // 控制播放张数
var point = 0; // 控制小圆点
function autoplay() {
// 播放张数
key++;
if (key > ullis.length - 1) { // 判断是否播放完
leader = 0; // 迅速跳回
key = 1; // 下次播放第二张
}
animate(ul, -key * ullis[0].offsetWidth);
// 小圆点
point++;
if (point > ollis.length - 1) {
point = 0;
}
for (var i = 0; i < ollis.length; i++) { // 先清除所有的
ollis[i].removeAttribute("class");
}
ollis[point].setAttribute("class", "current") // 再保留现在的
}
// 5、鼠标经过事件
slider.onmouseover = function () {
clearInterval(timer);
}
slider.onmouseout = function () {
timer = setInterval(autoplay, 3000);
}
</script>
</html>