这周学习了轮播图，并且在周考的时候又考了一遍，看来轮播图很重要，那就在来复习一遍。
css样式和div样式都是因人而异的，所以不必多费口舌。参考一下就可以。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/zk2.css">
</head>
<body>
<div>
<ul>
<li><img src="./imgs/8v0=Baf4OWedb7kKQ=0xZQ0OU97virMpQabGK8jtft4Kq1537868530179.jpg" alt=""></li>
<li><img src="./imgs/mmexport1546744775838.jpg" alt=""></li>
<li><img src="./imgs/res05_attpic_brief.jpg" alt=""></li>
<li><img src="./imgs/timg (1).jpg" alt=""></li>
<li><img src="./imgs/timg.jpg" alt=""></li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<button id="left"><</button>
<button id="right">></button>
</div>
</body>
这里是css样式
* {
margin: 0;
padding: 0;
list-style: none;
}
div {
position: relative;
width: 1000px;
height: 500px;
margin: 0 auto;
overflow: hidden;
}
div ul li {
width: 1000px;
height: 500px;
}
div ul li img {
width: 1000px;
height: 500px;
}
div ol {
position: absolute;
top: 80%;
left: 29%;
}
div ol li {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: pink;
text-align: center;
line-height: 50px;
float: left;
margin-left: 30px;
}
div #left {
width: 40px;
height: 100px;
font-size: 30px;
position: absolute;
left: 0;
top: 45%;
}
div #right {
width: 40px;
height: 100px;
font-size: 30px;
position: absolute;
right: 0;
top: 45%;
}
在后面的排他里需要用到这个样式
.active {
background-color: green;
}
重头戏来了
这里在做声明引入
<script>
window.onload = function () {
//声明引入
var box = document.querySelector('div');
var img_ind = document.querySelectorAll('ul li');
var ol_li = document.querySelectorAll('ol li');
var left = document.getElementById('left');
var right = document.getElementById('right');
var timer = null;//定时器
var index = 0;//下标
这里是右侧的点击事件
//右侧点击事件
right.onclick = function () {
index++;//下标增加
if (index > img_ind.length - 1) {//大于最后一张的下标时，返回第一张
index = 0;
}
outOthers();//排他
}
这里是左侧的点击事件
//左侧点击事件
left.onclick = function () {
index--;//下标减少
if (index < 0) {//小于第一张的下标时，回到最后一张
index = img_ind.length - 1;
}
outOthers();//排他
}
因为需要他在没有任何操作的情况下自动去轮播，以达到一个展示的效果，所以这里我们需要做一个定时器去让他实现这个目的
timer = setInterval(function () {//定时器通过增加下标自动播放图片，相当于将左侧点击自动化
index++;
if (index > img_ind.length - 1) {
index = 0;
}
outOthers();//排他
}, 1000);
这里算是比较人性化的一个操作了，在用户划入展示内容上的时候，去让上面的自动展示效果停止，在指针离开展示内容上的时候，继续上面的自动展示。这里需要用到
mouseover 和 mouseout ；来实现这个功能。
box.onmouseover = function () {//鼠标划入时定时器停止，并为空
clearInterval(timer);
timer = null;
}
box.onmouseout = function () {//鼠标移出时定时器继续运行
timer = setInterval(function () {
index++;
if (index > img_ind.length - 1) {
index = 0;
}
outOthers();//排他
}, 1000);
}
这里需要用一个for循环来达到导航和内容进行绑定的效果
for (var j = 0; j < ol_li.length; j++) {
ol_li[j].ind = j;
ol_li[j].onclick = function () {//导航划入
index = this.ind;//将导航和图片同步
outOthers();//排他
}
}
因为上面很多步骤都需要用到排他效果来达成一些效果，所以为了简便，将排他进行一个封装，这里就用到了上面我们单独做的那个样式。
function outOthers() { //封装排他
for (var i = 0; i < img_ind.length; i++) {//将每一项的样式清除
img_ind[i].style = 'display:none';
ol_li[i].className = ''
}
//赋予当前项的样式
img_ind[index].style = 'display:block';
ol_li[index].className = 'active'
}
}
</script>
</body>
</html>
