<!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>
// 第一步：
// 获取最大的父元素盒子
// 获取轮播图盒子
// 获取轮播图盒子宽度
// 获取ul
// 获取ul下的所有li
// 获取ol
// 第二步：
// 为ol下添加等同轮播图数量的小按钮
// 鼠标移入到li中，显示下标相等的图片
// 第三步：
// 鼠标移入到元素中，显示左右点击焦点按钮
// 第四步：
// 为左右点击焦点按钮添加点击事件
// 定义移动函数
// 第五步：
// 为轮播图加定时器
// 鼠标移入盒子，停止计时器，鼠标移出，开启计时器
//根据id获取元素对象
function my$(id) {
return document.getElementById(id);
}
// 第一步：获取所有的盒子，保存到变量
// 获取最外面id 为 box的div
var box = document.getElementById('box');
// 获取轮播图盒子
var screen = box.children[0];
// 获取照片的宽度
var imgWidth = screen.offsetWidth;
console.log(imgWidth)
// 获取ul
var ulObj = screen.children[0];
// 获取ul下的li
var list = ulObj.children;
// 获取ol
var olObj = screen.children[1];
// 获取左右焦点父元素
var arr = document.getElementById('arr');
// 声明临时变量pic
var pic = 0;
// 第二步：为ol下添加等同轮播图数量的小按钮
// 遍历ul下的所有li
for (let i = 0; i < list.length; i++) {
// 为ol下创建li标签
var liObj = document.createElement("li");
// 创建好的il添加到ol中
olObj.appendChild(liObj);
// 遍历出来的每个索引的值，赋值给ol下的li中
liObj.innerHTML = [i + 1];
// 在每个ol中的li标签上添加自定义属性，存储索引值
liObj.setAttribute("index",i);
// 为ol下的li注册鼠标进入事件
liObj.onmouseover = function () {
// 遍历ol下的所有li
for (let i = 0; i < olObj.children.length; i++) {
// 移除ol下的每个li的类名
olObj.children[i].removeAttribute("class")
}
// 为当前li动态添加类名
this.className = "current";
// 获取当前的li索引值，声明全局变量pic，保存在变量pic中
pic = this.getAttribute("index");
// 移动ulObj 负（当前索引值乘相框的宽度）
animate(ulObj, -pic * imgWidth);
}
}
// 为ol下的第一个li添加名为current的类
olObj.children[0].className = "current";
// 克隆第一个li加入到ul的最后
ulObj.appendChild(list[0].cloneNode(true));
// 第三步：鼠标移入到元素中，显示左右点击焦点按钮
box.onmouseover = function () {
arr.style.display = "block";
//鼠标进入废掉之前的定时器
clearInterval(timeId);
}
box.onmouseout = function () {
arr.style.display = "none";
//鼠标离开自动播放
timeId = setInterval(clickHandle, 1000);
}
// 第四步：为左右点击焦点按钮添加点击事件
// 点击右边焦点按钮
my$("right").onclick = clickHandle;
function clickHandle() {
// 如果ol下的索引值等于ul下的li长度 -1
if(pic == list.length - 1){
// 初始化索引值
pic = 0;
// 移动ul至距离左边距为0像素
ulObj.style.left = 0 + "px";
}else{
// 索引值++
pic++;
// 相册向左移动距离 == 负（索引值*相框宽度）
animate(ulObj, -pic * imgWidth);
// 如果当前ol下的索引值等于ul下的长度-1;
if (pic == list.length - 1) {
// ol下的所有li清空添加的class名
olObj.children[olObj.children.length - 1].className = "";
// 为ol下的第一个li添加名为curren的类名
olObj.children[0].className = "current";
}else{
// 遍历ol下的所有li
for (let i = 0; i < olObj.children.length; i++) {
// 清空ol下的所有li类属性
olObj.children[i].removeAttribute("class");
}
// 为ol下的第pic个的li添加名为current的类
olObj.children[pic].className = "current";
}
}
}
// 点击左边焦点按钮
my$("left").onclick = function () {
// 如果当前的ol下的li索引值等于0
if( pic == 0 ){
// pic默认为ul下的li长度-1
pic = list.length-1;
// 相框移动距离 = 为第pic个图片乘相框宽度
ulObj.style.left = -pic * imgWidth + "px";
}else{
pic--;
// 相框移动距离 = 向左移动（为第pic个图片乘相框宽度）
animate(ulObj, -pic * imgWidth);
for (let i = 0; i < olObj.children.length; i++) {
// 清空ol下的所有li的类
olObj.children[i].removeAttribute("class")
}
// 为ol下的第pic个添加名为 current 的类
olObj.children[pic].className = "current";
}
}
// 第五步：为轮播图加定时器
var timeId = setInterval(clickHandle, 5000);
// 获取元素的当前位置,移动,每次移动多少像素
function animate(element, target) {
//每次调用这个函数的时候先清理之前的计时器
clearInterval(element.setId);
element.setId = setInterval(function () {
//获取元素当前的位置
var walk = element.offsetLeft;
//每次移动的像素
var step = 15;
//判断移动的步数应该是正数还是负数
step = walk < target ? step : -step;
//当前的位置=之前的当前位置+移动的步数
walk = walk + step;
if (Math.abs(target - walk) < Math.abs(step)) {
//把计时器清理
clearInterval(element.setId);
element.style.left = target + "px";
} else {
//赋值给要移动的元素
element.style.left = walk + "px";
}
}, 20);
}
</script>
</body>
</html>
网友评论