轮播图详解
2019-05-16 本文已影响0人
椋椋夜色
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>轮播图详解</title>
<style>
* {
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: 0;
/*要足够宽才放到一行里*/
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;
}
/*点到哪个页码就让哪个页码加一个current类就变黄了*/
.all ol li.current {
background: yellow;
}
#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 {
/*距离父元素右边5像素*/
right: 5px;
/*代表把left的值清空（设置为默认值）*/
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>
<li><img src="images/1.jpg" width="500" height="200" /></li>
</ul>
<!-- 页码-->
<ol>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
<!-- 左右箭头那一部分-->
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
<script src="./common.js"></script>
<script>
// 1.显示和隐藏箭头的功能
// 1.1 找大盒子，为了给它加鼠标移入和移出
// 1.2 找放箭头的div，要显示或隐藏它
// 1.3 移入事件里，显示箭头，移出事件里隐藏箭头
// 2.完成下一张和上一张图片的功能
// 2.1 找到下一张按钮，给它加点击事件
// 2.2 准备一个变量保存当前图片的索引，图片索引从0开始
// 2.3 点击事件里让索引+1，用+1后的索引乘以宽度，取负数，赋值给ul的left
// 2.4 给上一张加点击事件，点击事件里让索引-1，用-1后的索引乘以宽度，取负数，赋值给ul的left
// 1.显示和隐藏箭头的功能
// 1.1 找大盒子，为了给它加鼠标移入和移出
var box = document.getElementById("box");
// 1.2找放箭头的div，要显示或隐藏它
var arr = document.getElementById("arr");
// 1.3移入事件里，显示箭头;
box.onmouseover = function () {
arr.style.display = "block";
// 6.5 清除计时器
clearInterval(timerID);
};
// 1.4 移出事件,隐藏箭头
box.onmouseout = function () {
arr.style.display = "none";
// 6.6 鼠标移出开启定时器
timerID = setInterval(ziDong, 2000);
};
// 2.完成下一张和上一张图片的功能
//2.1 找到ul(放图片的地方)
var ul = document.querySelector("ul");
//2.2 找到放图片的div的宽度
var screenW = document.querySelector(".screen").offsetWidth;
// 4.完成页码显示
// 4.1 先找到所有的页码（ol的子代li）
var olList = document.querySelectorAll("ol>li");
// console.log(olList);
// 6.1添加定时器
var timerID = setInterval(ziDong, 2000);
// 6.2 封装需要轮播的代码
function ziDong() {
// 3.1 如果当前页是最后一页
if (index == ul.children.length - 1) {
//3.2 闪现回第一页，也就是下标0
index = 0;
ul.style.left = "0px";
}
// 2.5 点击事件里让索引+1，用+1后的索引乘以宽度，取负数，赋值给ul的left
index++;
//2.6 要移动的元素
animate(ul, -index * screenW);
// 4.2 排他 (先把ol里的样式清空)
for (var i = 0; i < olList.length; i++) {
olList[i].className = "";
} //4.3 如果你当前的图片是最后一张（也就是看起来是第一张的图片）
if (index == ul.children.length - 1) {
//4.4 就让第一个页码高亮
olList[0].className = "current";
} else {
//4.5 翻页后立刻拿到当前图片的下标， 根据图片下标取出对应的页码
olList[index].className = "current";
}
};
// 6.3 准备一个变量保存当前图片的索引，图片索引从0开始
var index = 0;
// 6.4 找到下一张按钮，给它加点击事件
document.getElementById("right").onclick = function () {
ziDong();
}
/*
// 2.3 准备一个变量保存当前图片的索引，图片索引从0开始
var index = 0;
// 2.4 找到下一张按钮，给它加点击事件
document.getElementById("right").onclick = function () {
// 3.1 如果当前页是最后一页
if (index == ul.children.length - 1) {
//3.2 闪现回第一页，也就是下标0
index = 0;
ul.style.left = "0px";
}
// 2.5 点击事件里让索引+1，用+1后的索引乘以宽度，取负数，赋值给ul的left
index++;
//2.6 要移动的元素
animate(ul, -index * screenW);
// 4.2 排他 (先把ol里的样式清空)
for (var i = 0; i < olList.length; i++) {
olList[i].className = "";
}
//4.3 如果你当前的图片是最后一张（也就是看起来是第一张的图片）
if (index == ul.children.length - 1) {
//4.4 就让第一个页码高亮
olList[0].className = "current";
} else {
//4.5 翻页后立刻拿到当前图片的下标，根据图片下标取出对应的页码
olList[index].className = "current";
}
}; */
// 2.7 找到上一张按钮，给它加点击事件
document.getElementById("left").onclick = function () {
//3.3 如果当前页是下标0
if (index == 0) {
//3.4就闪现到最后一页（也就是看起来跟下标0一样的那一页）
index = ul.children.length - 1;
ul.style.left = -index * screenW + "px";
}
// 2.8 点击事件里让索引+1，用+1后的索引乘以宽度，取负数，赋值给ul的left
index--;
//2.9要移动的元素
animate(ul, -index * screenW);
//4.6 排他 (先把ol里的样式清空)
for (var i = 0; i < olList.length; i++) {
olList[i].className = "";
}
//4.7 翻页后立刻拿到当前图片的下标，根据图片下标取出对应的页码
olList[index].className = "current";
};
// 3.完成无限轮播
// 先给html部分(放图片的ul里)加一个li加到最后，这个li（直接从第一个li复制的）
// 下一页点击事件里，判断当前是不是最后一页（也就是像第一页的那一页），如果是，就闪现到第一页，然后再下一页
// 上一页点击事件里，判断当前是不是下标0那一页，如果是，就闪现到最后一页，然后再上一页
// 4.完成页码显示
// 4.1 先找到所有的页码（ol的子代li）
// 4.2 下一页点击事件里，当滚图片后，用图片最新的下标，取出对应的页码，把对应页码设置高亮（记得先排他）
// 4.3 点下一页会有情况要停在最后一页（长得跟第一页一样的那一页），这个时候要让下标0的页码高亮，所以记得做判断
// 只有最后一页时让下标0的页码高亮，其他时候图片是下标几，就让下标几的页码高亮
// 4.4 上一页的点击事件里，滚图片后，用图片下标取对应的页码， 把对应页码设置高亮（记得排他）
// 5. 完成页码的点击事件
// 5.1 遍历所有页码， 把页码的索引存在每个页码行内
// 5.2 给每个页码加点击事件
// 5.3 点击事件里取出被点击的页码的下标， 再让ul移动到对应位置去
// 5.4 把记录图片下标的变量， 也更新为当前下标
// 5.5 排他页码， 让被点击的页码高亮
// 5.1 遍历所有页码
for (var i = 0; i < olList.length; i++) {
// 5.2 把页码的索引存在每个页码行内
// setAttribute('index',i) 添加自定义属性;
olList[i].setAttribute('index', i)
//5.3 给每个页码加点击事件
olList[i].onclick = function () {
//5.4 取出被点击的页码的下标
// getAttribute('index') 获取属性;
var idx = this.getAttribute('index');
// 5.5 animate 移动盒子的动画函数 页码的下标是几，就让图片移动到对应的下标
animate(ul, -idx * screenW);
// 5.6 移动到哪张图片后，也要让记录当前图片是第几个下标的变量也要得到更新
index = idx;
// 5.7 排他页码， 让被点击的页码高亮
for (var j = 0; j < olList.length; j++) {
olList[j].className = "";
}
//5.8 让被点击的页码高亮
this.className = "current";
}
}
</script>
</body>
</html>
