0基础学前端必修课 js+c3变色轮播图

0基础学前端必修课 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])
}

}
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

posted @ 2017-05-02 14:07 倪殤阅读(203) 评论(1) 收藏举报

刷新页面返回顶部