轮播图
2019-05-13 本文已影响0人
椋椋夜色
<!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: 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>
<!--
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
3.完成无限轮播
3.1 先给html部分加一个li加到最后，这个li（直接从第一个li复制的）
3.2 下一页点击事件里，判断当前是不是最后一页（也就是像第一页的那一页），如果是，就闪现到第一页，然后再下一页
3.3 上一页点击事件里，判断当前是不是下标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 排他页码，让被点击的页码高亮
-->
<script src="common.js"></script>
<script>
//1.1 找大盒子，为了给它加鼠标移入和移出
var box = document.getElementById('box');
//1.2 找放箭头的div，要显示或隐藏它
var arr = document.getElementById('arr');
//找到ul
var ul = document.querySelector('ul');
//找到放图片的div的宽度
var screenW = document.querySelector('.screen').offsetWidth;
// 找到所有页码，找ol里的子代li
var pageList = document.querySelectorAll('ol>li');
console.log(pageList);
//1.3 移入事件里，显示箭头，移出事件里隐藏箭头
box.onmouseover = function () {
arr.style.display = "block";
// 清除计时器
clearInterval(timerID);
}
//移出
box.onmouseout = function () {
arr.style.display = "none";
timerID = setInterval(nextPage, 2200);
}
// 开启计时器
var timerID = setInterval(nextPage, 2200);
function nextPage() {
// 如果当前页是最后一页
if (index == ul.children.length - 1) {
//闪现回第一页，也就是下标0
index = 0;
ul.style.left = "0px";
}
index++;
//算出距离赋值给ul的left
// ul.style.left = -index * screenW + "px";
//要移动的元素
animate(ul, -index * screenW);
// 排他
for (var i = 0; i < pageList.length; i++) {
pageList[i].className = "";
}
// 如果你当前的图片是最后一张（也就是看起来是第一张的图片）
if (index == ul.children.length - 1) {
//就让第一个页码高亮
pageList[0].className = "current";
} else {
//翻页后立刻拿到当前图片的下标，根据图片下标取出对应的页码
pageList[index].className = "current";
}
}
// 这个变量用来保存图片下标，图片从0开始
var index = 0;
// 2.1 下一页加点击事件
document.getElementById('right').onclick = function () {
nextPage();
}
// 给所有页码加点击事件
for (var i = 0; i < pageList.length; i++) {
// 把下标保存起来
pageList[i].setAttribute('index', i);
pageList[i].onclick = function () {
//取出被点击的页码的下标
// console.log(this);
var idx = this.getAttribute('index');
// idx == 0 判断是点击的是不是页码1
// index == ul.children.length - 2 判断的是当前图片是不是倒数第二张
// 如果两个都满足了，我们就应该滚到最后一张（也就是看起来第一张的图片）
if (idx == 0 && index == ul.children.length - 2) {
idx = ul.children.length - 1;
// 判断当前图片是否为最后一张
} else if (index == ul.children.length - 1 && idx != pageList.length - 1) {
// 如果是先闪现回第一张
index = 0;
ul.style.left = 0;
// 如果是第一张，而且点击的是最后一个页码，就闪现到最后一张
} else if (index == 0 && idx == pageList.length - 1) {
//闪现到最后一张
index = ul.children.length - 1;
ul.style.left = -index * screenW + "px";
}
// 页码的下标是几，就让图片移动到对应的下标
animate(ul, -idx * screenW);
// 移动到哪张图片后，也要让记录当前图片是第几个下标的变量也要得到更新
index = idx;
//排他
for (var j = 0; j < pageList.length; j++) {
pageList[j].className = "";
}
this.className = "current";
}
}
</script>
</body>
</html>
