這周學習了輪播圖，并且在周考的時候又考了一遍，看來輪播圖很重要，那就在來復習一遍。
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();//排他
}
因為需要他在沒有任何操作的情況下自動去輪播，以達到一個展示的效果，所以這里我們需要做一個定時器去讓他實現(xiàn)這個目的
timer = setInterval(function () {//定時器通過增加下標自動播放圖片，相當于將左側點擊自動化
index++;
if (index > img_ind.length - 1) {
index = 0;
}
outOthers();//排他
}, 1000);
這里算是比較人性化的一個操作了，在用戶劃入展示內(nèi)容上的時候，去讓上面的自動展示效果停止，在指針離開展示內(nèi)容上的時候，繼續(xù)上面的自動展示。這里需要用到
mouseover 和 mouseout ；來實現(xiàn)這個功能。
box.onmouseover = function () {//鼠標劃入時定時器停止，并為空
clearInterval(timer);
timer = null;
}
box.onmouseout = function () {//鼠標移出時定時器繼續(xù)運行
timer = setInterval(function () {
index++;
if (index > img_ind.length - 1) {
index = 0;
}
outOthers();//排他
}, 1000);
}
這里需要用一個for循環(huán)來達到導航和內(nèi)容進行綁定的效果
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>
