文档章节

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
关于图片轮播图的一个简单实例 以及实例中发现问题

1.最近在学习JS的过程中,为了巩固水平做了一个简单的轮播图,以及在做的过程中发现一些问题(未解决!希望可以有大佬可以解释这个问题) 2.代码如下:

前端二弟
05/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Java 使用 pinyin4j 生成汉字拼音

添加 pinyin4j jar包 <dependency> <groupId>com.belerweb</groupId> <artifactId>pinyin4j</artifactId> <version>2.5.0</version> ......

yh32
10分钟前
0
0
Deepin 安装wireshark抓包工具

一、关于deepin和wireshark deepin目前已经发展到15.8了,开发Android毫无压力,在四个月的使用时间里,已经非常习惯了。目前想处理一些网络问题,因此尝试在deepin上安装一个抓包工具。dee...

IamOkay
52分钟前
6
0
Docker镜像仓库服务-Nexus

建立云原生集群系统,建立自己的私有Docker镜像仓库必不可少。一方面可以加快多节点部署容器镜像的下载速度,另一方面是为了安全(容器里存储有系统所有的信息、包括密码、数据库等等,切记不...

openthings
今天
4
0
127.0.0.1 和 0.0.0.0 地址的区别

1. IP地址分类 1.1 IP地址表示 IP地址由两个部分组成,net-id和host-id,即网络号和主机号。 net-id:表示ip地址所在的网络号。 host-id:表示ip地址所在网络中的某个主机号码。 即: IP-a...

华山猛男
今天
24
0
解决Unknown host 'd29vzk4ow07wi7.cloudfront.net'. You may need to adjust the proxy settings in Gradle.

把 总项目 下的 build.gradle 中的 两个 jcenter() 用 maven{ url ‘http://maven.aliyun.com/nexus/content/groups/public/’} 代替。...

lanyu96
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部