js+c3變色輪播圖
<html>
<head>
<title>原生JS輪播</title>
<meta charset="utf-8" />
<style>
*{margin:0;padding:0}
ul{border:1px solid #eee;width:100%;height:300px;position:relative}
li{width: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])
}
更多資料每日分享加群 120342833 驗證回答 ZZ
}
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>
js+c3變色輪播圖