js+c3变色轮播图

原生JS轮播

*{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}

第一章

第二章

第三章

第四章

dimo("der")

function dimo(x){

par=document.getElementById(x);

childs=par.childNodes

for(i=0;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[i].style.opacity="0"

childs[i].style.zIndex="-2"

childs[i].style.transition="all0.35s"

}

childs[show].style.opacity="1"

childs[show].style.zIndex="1"

},2000)

}