JS 淡入淡出轮播图
HTML+CSS部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Website</title>
<link rel="stylesheet" type="text/css" href="font_i85zuoyl9tg/iconfont.css">
<style>
*{
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;
}
</style>
</head>
<body>
<div class="box">
<img src="image/slideshow-apartments-01.jpg" alt="" >
<img src="image/slideshow-apartments-02.jpg" alt="" >
<img src="image/slideshow-apartments-03.jpg" alt="" >
<img src="image/slideshow-apartments-04.jpg" alt="" >
<img src="image/slideshow-apartments-05.jpg" alt="" >
<a id="left" href="javascript:;"><i class="iconfont icon-xiaoyuhao"></i></a> //左边的按钮
<a id="right" href="javascript:;"><i class="iconfont icon-dayu"></i></a>//右边的按钮
<ul id="oList">//序号标签
<li class="oLi">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
JS部分
<script>
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.onmouseenter=function () {//移入显示两边按钮
oLeft.className='on';
oRight.className='on';
clearInterval(timer);//清除定时器
};
oDiv.onmouseleave=function () {//移出隐藏按钮
oLeft.className='in';
oRight.className='in';
timer=setInterval(show,1000)//开启定时器
};
oRight.onclick=function () {//往右边的点击事件
index++;
if(index>=oImg.length) index=0;
time();
};
oLeft.onclick=function () {//往左边的点击事件
index--;
if(index<0) index=oImg.length-1;
time();
};
function time() {
for(var i=0;i<oImg.length;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<oLi.length;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毫秒切换一次
</script>
