文档章节

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
前天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

MySQL 乱七八糟的可重复读隔离级别实现

MySQL 乱七八糟的可重复读隔离级别实现 摘要: 原文可阅读 http://www.iocoder.cn/Fight/MySQL-messy-implementation-of-repeatable-read-isolation-levels 「shimohq」欢迎转载,保留摘要,谢...

DemonsI
50分钟前
2
0
Spring源码阅读——2

在阅读源码之前,先了解下Spring的整体架构: 1、Spring的整体架构 1. Ioc(控制反转) Spring核心模块实现了Ioc的功能,它将类与类之间的依赖从代码中脱离出来,用配置的方式进行依赖关系描...

叶枫啦啦
今天
1
0
jQuery.post() 函数格式详解

jquery的Post方法$.post() $.post是jquery自带的一个方法,使用前需要引入jquery.js 语法:$.post(url,data,callback,type); url(必须):发送请求的地址,String类型 data(可选):发送给后台的...

森火
今天
0
0
referer是什么意思?

看看下面这个回答(打不开网页可以把网址复制到搜索栏): https://zhidao.baidu.com/question/577842068.html

杉下
今天
1
0
使用U盘安装CentOS-解决U盘找不到源

1. 使用UltraISO制作CentOS安装盘 如果需要安装带界面的系统,为保证安装顺利,可选择Everything版本的ISO制作安装盘。 2. 在BIOS中选择使用U盘安装 系统启动后,进入安装选择界面,其中有三...

Houor
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部