0基础学前端必修课 js+c3变色轮播图
<html>
<head>
<title>原生JS轮播</title>
<meta charset="utf-8" />
<style>
*{margin:0;padding:0}
ul{border:1px solid #eee;100%;height:300px;position:relative}
li{100%;height:300px;position:absolute;text-align:center;font-size:100px;line-height:300px;top:0px;}
ul>li:nth-child(1){background:red}
ul>li:nth-child(2){background:blue}
ul>li:nth-child(3){background:chartreuse}
ul>li:nth-child(4){background:darkseagreen}
</style>
</head>
<body>
<div>
<ul id="der">
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
<li>第四章</li>
</ul>
</div>
<script>
dimo("der")
function dimo(x){
par=document.getElementById(x);
childs=par.childNodes
for(i=0;i<childs.length;i++)
{
if(childs[i].nodeType!==1)
{
par.removeChild(childs[i])
}
}
show=0
setInterval(function(){
show++
if(show>childs.length-1)
{
show=0
}
for(i=0;i<childs.length;i++)
{
childs[i].style.opacity="0"
childs[i].style.zIndex="-2"
childs[i].style.transition="all 0.35s"
}
childs[show].style.opacity="1"
childs[show].style.zIndex="1"
},2000)
}
</script>
</body>
</html>
前端/JAVA/PHP学习交流群120342833 课工场官网注册UID获取免费学习视频课， http://www.kgc.cn/?tuin=7145