文档章节

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

小婧大神
 小婧大神
发布于 2017/05/02 12:39
字数 219
阅读 11
收藏 0

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  海量学习资料免费送http://www.kgc.cn/?tuin=7145

本文转载自:

共有 人打赏支持
小婧大神
粉丝 0
博文 77
码字总数 3758
作品 0
加载中

评论(1)

小婧大神
小婧大神
你要的学习资料到了-498854752
回顾自己三次失败的面试经历

前言 时间的齿轮已经来到了2017年的11月份,距离2018年仅仅还剩下不到两个月的时间。站在这个时间点上,我对自己之前三次失败的面试经历做了一次深度回顾。 可能很多小伙伴会问,为什么要去回...

闰土少年
2017/11/13
0
0
回顾自己三次失败的面试经历

前言 时间的齿轮已经来到了2017年的11月份,距离2018年仅仅还剩下不到两个月的时间。站在这个时间点上,我对自己之前三次失败的面试经历做了一次深度回顾。 可能很多小伙伴会问,为什么要去回...

闰土少年1991
2017/11/13
0
0
回顾自己三次失败的面试经历

前言 时间的齿轮已经来到了2017年的11月份,距离2018年仅仅还剩下不到两个月的时间。站在这个时间点上,我对自己之前三次失败的面试经历做了一次深度回顾。 可能很多小伙伴会问,为什么要去回...

闰土少年
2017/11/20
0
0
JavaScript基础入门--JavaScript简介

一、简单好学,富有表现力 —— JavaScript简介 1.1 JavaScript的用途 JavaScript用来制作web页面交互效果,提升用户体验。 简单列出几个JavaScript能够制作的页面效果,它能干什么: web前端...

weareshmily
2017/07/02
0
0
当大多数人对Vue理解到炉火纯青的时候,你应该思考怎么让vue页面骚气起来

写在前面 当大多数人Vue理解的炉火纯青的时候,你应该思考怎么让vue页面骚气起来,下面就我个人在接触Vue两年的时间里,在实际工作中门户网站在前端页面交互应用和技巧,炒几道“小菜”给大家...

codercao
08/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下单接口调优实战,性能提高10倍

概述 最近公司的下单接口有些慢,老板担心无法支撑双11,想让我优化一把,但是前提是不允许大改,因为下单接口太复杂了,如果改动太大,怕有风险。另外开发成本和测试成本也非常大。对于这种...

Sam哥哥聊技术
28分钟前
2
1
rabbitMQ的安装和配置

在Windows下进行rabbitMQ的安装 第一步:软件下载 在安装rabbitMQ之前,需要先安装Erlang。 Erlang官网:http://www.erlang.org/downloads rabbitMQ官网:http://www.rabbitmq.com/download....

狼王黄师傅
48分钟前
3
0
SAP产品的Field Extensibility

SAP开发人员的工作职责,除了实现软件的功能性需求外,还会花费相当的精力实现一些非功能性需求,来满足所谓的SAP Product Standard(产品标准)。这些产品标准,包含在SAP项目实施中大显身手...

JerryWang_SAP
53分钟前
2
0
Vue-Element-Upload

记录一下文件上传封装Js 代码示例 封装:uploadFile.vue <template> <el-upload v-model="attachment" ref="upload" class="upload-demo" :action="uploadUrl" ......

华山猛男
今天
4
0
AWVS破解及使用手册

1.安装 因为是windows软件,比较简单,此部分略: 破解插件下载: 链接: https://pan.baidu.com/s/1x9LK9F3KvqDgTvXDjoSZnQ 提取码: 7k4u 2.创建扫描目标 2-1.Targets->Add Target 2-2.对话框...

硅谷课堂
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部