html图片淡入淡出轮播图,JS 淡入淡出轮播图

HTML+CSS部分

My First Website

*{

margin: 0;

padding: 0;

}

.box{

margin: 20px auto;

width: 1100px;

height: 482px;

position: relative;

/*overflow: hidden;*/

}

a{

display: block;

width: 100px;

height: 100px;

border-radius: 50%;

background:rgba(0,0,0,0.5);

line-height: 100px;

text-decoration: none;

text-align: center;

color: #fff;

opacity:0 ;

}

#left{

position: absolute;

top: 191px;

left: 10px;

}

#right{

position: absolute;

top: 191px;

right: 10px;

}

img{

position: absolute;

opacity: 0;

}

.to{

opacity: 1;

}

.on{

opacity: 1;

transition: opacity 1s ;

}

.in{

opacity: 0;

transition: opacity 1s ;

}

ul{

display: flex;

/*justify-content: space-between;*/

align-items: center;

justify-content: center;

width: 600px;

list-style: none;

position: absolute;

top: 450px;

left:250px

/*left:*/

}

ul li{

width: 30px;

height: 30px;

background:rgba(0,0,0,.5);

line-height: 30px;

text-align: center;

margin-left: 20px;

}

.oLi{

background: #fff;

}

.oLi1{

background: #fff;

transition: opacity 1s;

}

//左边的按钮

//右边的按钮

• //序号标签
• 1
• 2
• 3
• 4
• 5

JS部分

var oDiv=document.querySelector('.box');//大盒子

var oImg=document.querySelectorAll('img');//获取所有图片标签

var oLeft=document.querySelector('#left');//获取左边按钮

var oRight=document.querySelector('#right');//获取右边按钮

var oLi=document.querySelectorAll('li');获取所有序号标签

var index=0;//定义下标值

var timer;//定义一个变量，用于定时器

oDiv.οnmοuseenter=function () {//移入显示两边按钮

oLeft.className='on';

oRight.className='on';

clearInterval(timer);//清除定时器

};

oDiv.οnmοuseleave=function () {//移出隐藏按钮

oLeft.className='in';

oRight.className='in';

timer=setInterval(show,1000)//开启定时器

};

oRight.οnclick=function () {//往右边的点击事件

index++;

if(index>=oImg.length) index=0;

time();

};

oLeft.οnclick=function () {//往左边的点击事件

index--;

if(index<0) index=oImg.length-1;

time();

};

function time() {

for(var i=0;i

oImg[i].className='';

oLi[i].className='';

}

oImg[index].className='on';

oLi[index].className='oLi1'

}

function show() {//自动播放事件

index++;

if(index>=oImg.length) index=0;

time();

}

//单击序号按钮显示对应的图片

for(var i=0;i

+function (x) {

oLi[i].onclick = function () {

index=x;

for (var i = 0; i < oLi.length; i++) {

oImg[i].className = '';

oLi[i].className = '';

}

oImg[x].className = 'on';

oLi[x].className = 'oLi1';

}

}(i)

}

timer=setInterval(show,1000);//1000毫秒切换一次