js轮播图

今天刚注意的一点：给子集元素定义绝对定位时要文字上下左右居中必须写line-height和text-align，不然文字会跑到元素外面；

轮播图：html样式

<div id="all">

<div id="pic">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="left" class="left_ojbk">
<div class="left_ojbk_one"></div>
<div class="left_ojbk_two"></div>
</div>
<div id="right" class="right_ojbk">
<div class="right_ojbk_one"></div>
<div class="right_ojbk_two"></div>
</div>
<div id="selectpic">
<div id="red"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

</div>

js代码：

window.οnlοad=function(){
//整体
var oAll=document.getElementById('all');
//图片集合
var oPic=document.getElementById('pic');
var aPic=oPic.getElementsByTagName('div');
//左右的按钮
var oLeft=document.getElementById('left');
var oRight=document.getElementById('right');
//下部按钮div
var oSelect=document.getElementById('selectpic');
var aSelect=oSelect.getElementsByTagName('div');
var num=0;
//初始化,让第一个背景div显示出来
aPic[0].style.display="block";


//循环下部按钮
for(var i=0;i<aSelect.length;i++)
{
//建立索引值
aSelect[i].index=i;
//当下部按钮被点击的时候执行函数
aSelect[i].οnclick=function(){
//循环下部按钮，初始化让所有样式全部清空
for(var j=0;j<aSelect.length;j++){
aSelect[j].style.background="black";
aPic[j].style.display="none";
}
//清空后改变当前样式
this.style.background="red";
aPic[this.index].style.display="block";
//让num值和当前值一样
num=this.index;
}
}


//右移执行
oRight.οnclick=rua;


//右移按钮封装
function rua(){
//建立外部变量每次执行累加
num=num+1;


//循环所有背景图片，清空样式
for(var i=0;i<aPic.length;i++)
{
aSelect[i].style.background="rgba(0,0,0,0.5)";
aPic[i].style.display="none";
}
//判断num值是否大于等于背景图片总长度，如果大于则说明已经最后一张，再点就只能跑回第一张所以让num=0
if(num>=aPic.length)
{
num=0;
}
//改变当前样式
aSelect[num].style.background="red";
aPic[num].style.display="block";
}


//逻辑同right
oLeft.οnclick=function(){
num=num-1;


for(var i=0;i<aPic.length;i++)
{
aSelect[i].style.background="rgba(0,0,0,0.5)";
aPic[i].style.display="none";
}


if(num<0)
{
num=aPic.length-1;
}
aSelect[num].style.background="red";
aPic[num].style.display="block";
}


//定时器每秒完成右移按钮
var timer=setInterval(rua,3000);


//移入关闭定时器
oAll.οnmοuseοver=function(){
clearInterval(timer);
}


//移出开启定时器
oAll.οnmοuseοut=function(){
timer=setInterval(rua,3000);

}

css样式：#all{
position: relative;
height:500px;
width:500px;
border:1px solid #000;
margin:50px auto;
}
#pic{
height:500px;
width:500px;
position: relative;
}
#pic>div{
height:500px;
width:500px;
color:black;
font-size:100px;
text-align:center;
line-height:500px;
display: none;
}
#pic>div:nth-of-type(1){
background:url("images/1.jpg");
background-size:cover;
}
#pic>div:nth-of-type(2){
background:url("images/2.jpg");
background-size:cover;
}
#pic>div:nth-of-type(3){
background:url("images/3.jpg");
background-size:cover;
}
#pic>div:nth-of-type(4){
background:url("images/4.jpg");
background-size:cover;
}
#pic>div:nth-of-type(5){
background:url("images/5.jpg");
background-size:cover;
}
#pic>div:nth-of-type(6){
background:url("images/6.jpg");
background-size:cover;
}
#selectpic{
height:30px;
width:200px;
display: flex;
justify-content: space-around;
position: absolute;;
z-index:1;
left:150px;
bottom:75px;
}
#selectpic>div{
height:30px;
width:30px;
border-radius:50%;
background:rgba(0,0,0,0.5);
}
#selectpic>#red{
background:red;
}
.right_ojbk{
height:50px;
width:50px;
/*border:1px solid #000;*/
margin:50px auto;
position: absolute;
right:0;
top:190px;
background:rgba(0,0,0,0);
border-radius:50%;
}
.left_ojbk{
height:50px;
width:50px;
/*border:1px solid #000;*/
margin:50px auto;
position: absolute;
left:0;
top:190px;
background:rgba(0,0,0,0);
border-radius:50%;
}
.right_ojbk:hover,.left_ojbk:hover{
background:white;
}
.right_ojbk>div,.left_ojbk>div{
position:absolute;
height:1px;
width:20px;
background:#fff;
transition:0.3s;
z-index:5;
}
.right_ojbk_one{
transform:rotate(60deg);
left:20px;
top:18px;
}
.left_ojbk_one{
transform:rotate(60deg);
left:15px;
top:37px;
}
.right_ojbk_two{
transform:rotate(-60deg);
left:20px;
top:35px;
}
.left_ojbk_two{
transform:rotate(-60deg);
left:15px;
top:20px;
}
.right_ojbk:hover .right_ojbk_one{
transform:rotate(35deg);
top:20px;
background:red;
}
.left_ojbk:hover .left_ojbk_one{
transform:rotate(35deg);
top:31px;
background:red;
}
.right_ojbk:hover .right_ojbk_two{
transform:rotate(-35deg);
top:31px;
background:red;
}
.left_ojbk:hover .left_ojbk_two{
transform:rotate(-35deg);
background:red;

}

还不够熟练 要多练下 图片需要自己添加 上文添加的是本地图片