之前是在选项卡菜单中用到了排他思想，当前选项卡样式与其他选项卡不同，怎么办呢？先用for循环遍历一遍，把所有的选项卡样式清掉，然后再设置当前的选项卡样式。
这两天学习轮播图的制作，发现在轮播图中，多处用到了排他思想。
1.点击小圆点时,当前小圆点对应的样式红色（.current），对应的图片显示，其他图片隐藏.
for (let i = 0; i < num; i++) {
ol.children[i].addEventListener('click', function() {
for (let k = 0; k < num; k++) {
/*排他思想*/
ol.children[k].className = '';
ul.children[k].className = '';
}
this.className = 'current';
ul.children[i].className = 'opa';
disc = i; /*点击的小圆点设置为当前的*/
})
}
2.点击右侧箭头，小圆点下标+1,也要把其他 的样式去掉，再设置（.current），图片所在列表项显示‘.opa’
arrowRight.addEventListener('click', function() {
disc++; //圆点样式
if (disc == num) {
disc = 0;
}
for (let k = 0; k < num; k++) {
/*排他思想*/
ol.children[k].className = '';
ul.children[k].className = '';
}
ol.children[disc].className = 'current';
ul.children[disc].className = 'opa';
})
3.点击左侧箭头，小圆点下标-1,然后也要用排他思想。
arrowLeft.addEventListener('click', function() {
disc--;
if (disc < 0) {
disc = num - 1;
}
for (let k = 0; k < num; k++) {
/*排他思想*/
ol.children[k].className = '';
ul.children[k].className = '';
}
ol.children[disc].className = 'current';
ul.children[disc].className = 'opa';
})
下面附上完整的轮播图代码。和上一篇文章的代码比，有以下几个变化：
1.鼠标移动到轮播图上，左右箭头的显示，是通过css的:hover实现的,感觉代码要比js代码简单。
.focus:hover div {
display: block;
}
focus.addEventListener('mouseover', function() {
arrowLeft.style.display = 'block';
arrowRight.style.display = 'block';
})
focus.addEventListener('mouseout', function() {
arrowLeft.style.display = 'none';
arrowRight.style.display = 'none';
})
2.小圆点所在的列表，列表项没有动态生成，ul有几项，ol就有几项，直接写在html文件中。
<ol class="disc">
<li class='current'></li>
<li></li>
<li></li>
</ol>
完整代码如下：
一、HTML文件rotation2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图-透明度实现</title>
<link rel="stylesheet" href="css/rotation2.css">
<script src="js/rotate2.js" charset="utf-8"></script>
</head>
<body>
<div class="focus">
<ul class="carousel"> <!-- 轮播图列表 -->
<li class="opa"><a href="#"><img src="images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/3.jpg" alt=""></a></li>
</ul>
<div class="arrowLeft"><</div> <!-- 左侧按钮 -->
<div class="arrowRight">></div> <!-- 右侧按钮 -->
<ol class="disc">
<li class='current'></li>
<li></li>
<li></li>
</ol>
</div>
</body>
</html>
二、CSS文件rotation2.css
* {
margin: 0;
padding: 0;
}
ul,ol,li {
list-style: none;
}
.focus {
position: relative;
width: 1000px;
height: 375px;
margin: 10px auto;
overflow: hidden;
}
.carousel {
position: absolute;
width: 100%;
left: 0px;
top: 0px;
}
.carousel li {
position: absolute; /*绝对定位*/
top: 0px;
left: 0px;
opacity: 0;
transition: opacity 1s; /*设置切换时过渡效果*/
}
.carousel li.opa {
/*li和.opa之间,无空格*/
opacity: 1;
}
.carousel li img {
width: 1000px;
height: 375px;
}
.focus div {
display: none;
position: absolute;
top: 50%;
transform: translate(0, -50%); /*上移，使垂直居中*/
width: 36px;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
font-size: 36px;
z-index: 99;
cursor: pointer;
}
.focus:hover div {
display: block;
}
.arrowLeft {
left: 10px;
}
.arrowRight {
right: 10px;
}
.arrowLeft:hover,
.arrowRight:hover {
background-color: rgba(128, 128, 128, .5);
}
.disc {
position: absolute;
bottom: 10px;
right: 50px;
z-index: 99;
}
.disc li {
display: inline-block;
width: 8px;
height: 8px;
background-color: #ccc;
margin: 0 3px;
border-radius: 50%;
cursor: pointer;
}
.disc li.current {
/*li和.current之间,无空格*/
background-color: #f00;
}
三、JavaScript文件
window.addEventListener('load', function() {
var focus = document.querySelector('.focus');
var arrowLeft = document.querySelector('.arrowLeft');
var arrowRight = document.querySelector('.arrowRight');
var ul = focus.querySelector('ul');
var ol = focus.querySelector('ol');
var num = ul.children.length;
var disc = 0;
//点击小圆点时,当前小圆点对应的样式，对应的图片显示
for (let i = 0; i < num; i++) {
ol.children[i].addEventListener('click', function() {
for (let k = 0; k < num; k++) {
/*排他思想*/
ol.children[k].className = '';
ul.children[k].className = '';
}
this.className = 'current';
ul.children[i].className = 'opa';
disc = i; /*点击的小圆点设置为当前的*/
})
}
//点击右侧箭头，小圆点下标+1
arrowRight.addEventListener('click', function() {
disc++; //圆点样式
if (disc == num) {
disc = 0;
}
for (let k = 0; k < num; k++) {
/*排他思想*/
ol.children[k].className = '';
ul.children[k].className = '';
}
ol.children[disc].className = 'current';
ul.children[disc].className = 'opa';
})
// 点击左侧箭头，小圆点下标-1
arrowLeft.addEventListener('click', function() {
disc--;
if (disc < 0) {
disc = num - 1;
}
for (let k = 0; k < num; k++) {
/*排他思想*/
ol.children[k].className = '';
ul.children[k].className = '';
}
ol.children[disc].className = 'current';
ul.children[disc].className = 'opa';
})
//自动播放，像点击右侧按钮
var timer = setInterval(function() {
arrowRight.click();
}, 3000);
//鼠标移动到轮播图,停止轮播
focus.addEventListener('mouseover', function() {
clearInterval(timer);
timer = null;
})
//鼠标离开,开始轮播
focus.addEventListener('mouseout', function() {
timer = setInterval(function() {
arrowRight.click();
}, 3000);
})
})
可以看出，js文件中，应用了排他思想的三处代码是重复的，可以把这部分代码提取出来，单独写成一个函数disp(now).
function disp(now){
for (let k = 0; k < num; k++) {
/*排他思想*/
ol.children[k].className = '';
ul.children[k].className = '';
}
ol.children[now].className = 'current';
ul.children[now].className = 'opa';
}
修改后的完整的js文件如下。
window.addEventListener('load', function() {
var focus = document.querySelector('.focus');
var arrowLeft = document.querySelector('.arrowLeft');
var arrowRight = document.querySelector('.arrowRight');
var ul = focus.querySelector('ul');
var ol = focus.querySelector('ol');
var num = ul.children.length;
var disc = 0;
function disp(now){
for (let k = 0; k < num; k++) {
/*排他思想*/
ol.children[k].className = '';
ul.children[k].className = '';
}
ol.children[now].className = 'current';
ul.children[now].className = 'opa';
}
//点击小圆点时,当前小圆点对应的样式，对应的图片显示
for (let i = 0; i < num; i++) {
ol.children[i].addEventListener('click', function() {
disp(i); /*调用函数*/
disc = i; /*点击的小圆点设置为当前的*/
})
}
//点击右侧箭头，小圆点下标+1
arrowRight.addEventListener('click', function() {
disc++; //圆点样式
if (disc == num) {
disc = 0;
}
disp(disc); /*调用函数*/
})
// 点击左侧箭头，小圆点下标-1
arrowLeft.addEventListener('click', function() {
disc--;
if (disc < 0) {
disc = num - 1;
}
disp(disc); /*调用函数*/
})
//自动播放，像点击右侧按钮
var timer = setInterval(function() {
arrowRight.click();
}, 3000);
//鼠标移动到轮播图,停止轮播
focus.addEventListener('mouseover', function() {
clearInterval(timer);
timer = null;
})
//鼠标离开,开始轮播
focus.addEventListener('mouseout', function() {
timer = setInterval(function() {
arrowRight.click();
}, 3000);
})
})