css样式
* {
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}
#box {
width: 400px;
height: 250px;
border: 1px solid firebrick;
margin: 100px auto;
position: relative;
overflow: hidden;
cursor: pointer;
}
ul {
position: absolute;
width: 500%;
height: 250px;
transition: 0.5s;
}
ul li {
float: left;
width: 400px;
height: 250px;
}
ul li img {
width: 400px;
height: 250px;
}
#nav {
width: 200px;
height: 40px;
position: absolute;
bottom: 0px;
left: 130px;
}
#nav span {
width: 20px;
height: 20px;
background: green;
display: inline-block;
border-radius: 50px;
text-align: center;
line-height: 20px;
font-size: 12px;
cursor: pointer;
}
#nav .active {
background: gold;
color:#FF0000;
}
.left,.right {
width: 20px;
height: 30px;
background: black;
position: absolute;
top: calc(50% - 15px);
opacity: 0.5;
color: white;
font-size: 20px;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.right {
right: 0;
}
html代码
<div id="box">
<ul>
<li><img src="imgs/1.jpg" /></li>
<li><img src="imgs/2.jpg" /></li>
<li><img src="imgs/3.jpg" /></li>
<li><img src="imgs/4.jpg" /></li>
<li><img src="imgs/5.jpg" /></li>
</ul>
<div id="nav">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<div class="btn">
<div class="left"><</div>
<div class="right">></div>
</div>
js代码
var oBox = document.getElementById('box');
var oUl = oBox.getElementsByTagName('ul')[0];
var oLi = oUl.getElementsByTagName('li')[0];
var oNav = document.getElementById('nav');
var oSpan = oNav.getElementsByTagName('span');
var oBtn = document.querySelectorAll('.btn')[0];
var oDiv = oBtn.getElementsByTagName('div');
//console.log(oDiv)
// 六个点中,点击当前的这个点时,颜色变为active;
var index = 0; //保存当前小圆点的样式
var num = 0; //给按钮设置变量
var timer = null;
play();//调用
for(var i = 0; i < oSpan.length; i++){
oSpan[i].index = i; //导航原点的下标等于当前的图片
oSpan[i].onclick = function(){
oSpan[index].className = ''; //清除前面一个远点的样式
index = this.index;//这个下标等于当前oSpan的下标
this.className = 'active';
oUl.style.marginLeft = -400 * index + 'px';
}
}
for(var i = 0; i < oDiv.length; i++){ //按钮循环
oDiv[i].index = i;
oDiv[i].onclick = function(){
oSpan[index].className = ''; //在点击后清空前面的小原点的样式
num = this.index; //指的是左右按钮的下标0 ,1.
if(num){ // 这里要么是0,要么是1 num是左右按钮
index ++;
if(index > 4){index = 0}
}else{
index --;
if(index < 0){index = 4}
}
// 这里要将this换成oSpan[index],在这里this指向oDiv
oSpan[index].className = 'active';
oUl.style.marginLeft = -400 * index + 'px';
}
}
//设置定时器
function play(){
timer = setInterval(function(){
oSpan[index].className = '';
index ++;
if(index > 4){index = 0}
oSpan[index].className = 'active';
oUl.style.marginLeft = -400 * index + 'px';
},2000)
};
//清除定时器
oBox.onmouseover = function(){
clearInterval(timer);
};
oBox.onmouseout = function(){
play(); //代码重复 用play()替代