轮播图
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
#lun{
width:790px;
height:340px;
border:1px solid #ccc;
margin:0 auto;
position:relative;
cursor:pointer;
}
#lun img{
display:block;
}
#lun>ul>li{
opacity:0;
/*
默认情况下：
所有的li全部设置透明度为0
设置过渡效果 opacity 发生改变，在1s钟内完成
*/
transition:opacity .5s linear;
/* 设置元素的定位方式为absolute,保证所有的li元素全部在lun元素内 */
position:absolute;
}
/*
给元素添加class="active"属性，相当于设置元素具有opacity样式，值是1
*/
#lun>ul>.active{
opacity:1;
}
#listnum{
width:180px;
height:20px;
background:rgba(255,255,255,0.3);
position:absolute;
bottom:20px;
left:50%;
margin-left:-90px;
border-radius:10px;
}
#listnum>ul>li{
width:12px;
height:12px;
background:#fff;
border-radius:6px;
float:left;
margin-top:4px;
margin-left:9.5px;
}
#listnum>ul>.activenum{
background:#DB192A;
}
#left,#right{
width:30px;
height:60px;
position:absolute;
background:rgba(0,0,0,0.1);
display:none;
color:#fff;
font-size:20px;
text-align:center;
line-height:60px;
opacity:0.5;
}
#left{
top:50%;
margin-top:-30px;
}
#right{
top:50%;
right:0px;
margin-top:-30px;
}
#left:hover,#right:hover{
background:rgba(0,0,0,0.6);
opacity:1;
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<div id="listnum">
<ul>
<li class="activenum"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- 定义左箭头和右箭头 -->
<div id="left"><</div>
<div id="right">></div>
</div>