文档章节

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

小婧大神
 小婧大神
发布于 2017/05/02 12:39
字数 219
阅读 10
收藏 0
点赞 0
评论 1

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

回顾自己三次失败的面试经历

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

闰土少年1991 ⋅ 2017/11/13 ⋅ 0

回顾自己三次失败的面试经历

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

闰土少年 ⋅ 2017/11/20 ⋅ 0

JavaScript基础入门--JavaScript简介

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

weareshmily ⋅ 2017/07/02 ⋅ 0

360行,行行出状元——JS篇

昨天大致分析了IT中的12个职业,相信大家大致都有了了解,那么现在我就从工作内容、职业技能、职业需求等方面为大家详细分析这些职业。 今天我们先分析一下JS这一职业吧!!! JS 1 工作内容...

程序o07 ⋅ 01/05 ⋅ 0

关于图片轮播图的一个简单实例 以及实例中发现问题

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

前端二弟 ⋅ 05/17 ⋅ 0

用RecyclerView打造一个轮播图(进阶版)

前言 前几天写了篇《用RecyclerView打造一个轮播图》(以下简称基础版),看到有读者评论说相比Viewpager,用RecyclerView看起来没什么特别的优势。究其原因,目前只用到了RecyclerView最基础...

大头呆 ⋅ 2017/11/22 ⋅ 0

前端框架Vue(14)—— 利用 vue 过渡效果(transition)+定时器 实现轮播图通用组件

序论: 效果: 1、功能分析。 从上面的效果图中看,有四个基本功能: 2、场景介绍、分析。 环境是 vue 组件的形式,轮播图模块是以组件的形式,内嵌在父组件中。这样的好处是轮播图功能,低耦...

docallen ⋅ 2017/08/24 ⋅ 0

Exrick/3D-Banner

3D-Banner 基于Vue开发的3D轮播图组件 在线Demo:http://xmall.exrick.cn/ 高仿锤子商城官网轮播图,3D视差效果,实现后台可灵活配置,定时自动轮播 原作者 qingjin ; 二次开发 yucccc ; 本作...

Exrick ⋅ 04/21 ⋅ 0

思途旅游CMS V6.0.201706.0101

思途旅游 CMS V6.0.201706.0101 发布了,更新如下: 更新包 产品名 描述 状态 kb2017053101 思途CMS_基础 1、手机端列表页样式修正; 修复 kb2017052604 思途CMS_基础 1、后台robots保存修正...

学校的粉 ⋅ 2017/06/02 ⋅ 3

没有更多内容

加载失败,请刷新页面

加载更多

下一页

idea 整合 vue 启动

刚学习Vue 搭建了一个项目 只能命令启动 Idea里面不会启动 尝试了一下修改启动的配置 如下: 1.首先你要保证你的package.json没有修改过 具体原因没有看 因为我改了这个name的值 就没办法启动...

事儿爹 ⋅ 18分钟前 ⋅ 0

数据仓库技术概述(一看就是架构师写的,对我极其有用)

ETL,是英文 Extract-Transform-Load 的缩写,用来描述将数据从来源端经过抽取(extract)、交互转换(transform)、加载(load)至目的端的过程。ETL一词较常用在数据仓库,但其对象并不限于...

gulf ⋅ 19分钟前 ⋅ 0

redis在windows环境的后台运行方法

在后台运行,首先需要安装redis服务,命令为 redis-server.exe --service-install redis.windows.conf --loglevel verbose 启动,命令为 redis-server --service-start 停止,命令为 redis-...

程序羊 ⋅ 21分钟前 ⋅ 0

比特币现金开发者提出新的交易订单规则

本周,四位比特币现金的四位开发者和研究员:Joannes Vermorel(Lokad),AmaurySéchet(比特币ABC),Shammah Chancellor(比特币ABC)和Tomas van der Wansem(Bitcrust)共同发表了一篇关...

lpy411 ⋅ 25分钟前 ⋅ 0

vue获取input输入框的数据

用惯了jQuery,突然使用vue感觉很不习惯,有很多不同的地方,感觉是两个不同的思想来写前端的代码。jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作。而Vue则是通过...

王子城 ⋅ 27分钟前 ⋅ 0

竟然这就是面向对象的游戏设计?!

从程序角度考虑,许多 JavaScript 都基于循环和大量的 if/else 语句。在本文中,我们可了解一种更聪明的做法 — 在 JavaScript 游戏中使用面向对象来设计。本文将概述原型继承和使用 JavaSc...

柳猫 ⋅ 32分钟前 ⋅ 2

git cmd git bash

刚用到了Git,看到windows环境下有两个命令输入窗口 第一个是可视化图形界面,第二个是CMD,第三个是Bash。 Git中的Bash是基于CMD的,在CMD的基础上增添一些新的命令与功能。所以建议在使用的...

东东笔记 ⋅ 34分钟前 ⋅ 0

分布式系统CAP和Base

1、分布式系统 1.1 简介 由多台计算机和通信的软件组件通过计算机网络连接(本地网络或广域网)组成。分布式系统是建立在网络之上的软件系统。正是因为软件的特性,所以分布式系统具有高度的...

xixingzhe ⋅ 44分钟前 ⋅ 0

查看磁盘占用情况

记一次jenkins构建失败的问题 Build step 'Send build artifacts over SSH' changed build result to UNSTABLE 网上查资料都没明确表明是什么错,回忆之前处理这样的问题。第一时间想到的是不...

ManderSF ⋅ 46分钟前 ⋅ 0

数据库管理提速:SQL解析的探索与应用

前言: SQL解析是一项复杂的技术,一般都是由数据库厂商来掌握,当然也有公司专门提供SQL解析的API。SQL解析与优化是属于编译器范畴,和C语言等其他语言的解析没有本质的区别。其中分为词法分...

java高级架构牛人 ⋅ 53分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部