简单轮播图实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #div_c{
            width: 400px;
            height: 200px;
            position: relative;
        }
        #div_c img{
            width: 400px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .zindex{
            z-index: 100;
        }
        .zindex0{
            z-index: 0;
        }
        #oul{
            position: absolute;
            left: 250px;
            top: 155px;
            z-index: 101;
        }
        #oul li{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(0,0,0,0.3);
            float: left;
            list-style: none;
            margin: 2px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="div_c">
        <img class="zindex" src="http://img.taopic.com/uploads/allimg/110812/1820-110Q20K24526.jpg"/>
        <img src="http://wenwen.soso.com/p/20090901/20090901120135-1666292770.jpg"/>
        <img src="http://pica.nipic.com/2007-12-18/200712189215503_2.jpg"/>
        <img src="http://h.hiphotos.baidu.com/zhidao/pic/item/5bafa40f4bfbfbed0470471b78f0f736afc31fac.jpg"/>
        <img src="http://img3.redocn.com/20091221/20091217_fa2a743db1f556f82b9asJ320coGmYFf.jpg"/>
        <ul id="oul">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>//我这个只能实现循环,其他点击更换图片效果还没加
    var div_c=document.getElementById('div_c');
    var oul=document.getElementById('oul');
    var imgs=div_c.getElementsByTagName('img');
    var lis=oul.getElementsByTagName('li');

        var i=0;
        setInterval(function(){
            if(i==0){//之所以加一个if判断是以为纠正上一次循环后要改变最后一个img的样式为zindex0,同时设置imgs[0]的样式为显示;不然的话最后一个img就一直是zindex样式了
                imgs[0].className="zindex";//样式为zindex就显示在最顶层,z-index值为100
                imgs[4].className="zindex0";//样式为zindex0,z-index值就为0
            }else{
                imgs[i].className="zindex";
                imgs[i-1].className="zindex0";
            }
            i++;
            i=i%5;//求余,重新来过
            
        },3000);
    </script>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端布道

CSS选择器详解

最近在做一些面试的工作,我经常会问的一个问题就是:CSS中有哪些选择器。我往往得到的答案就是id选择器啊、class选择器啊,再追问下去就没了,这让我很是意外!...

36040
来自专栏偏前端工程师的驿站

根据标准word模板生成word文档类库(开源)

前言     最近因项目需要要自定义标准word模板,并以编码方式操作word模板、填充数据和生成word文档,于是自己写了条小“内裤”来实现这个功能。该“内...

27460
来自专栏前端知识分享

第77天:jQuery事件绑定触发

返回值不同,.height()方法返回的是 数字类型(20),.css(“height”)返回的是字符串类型(20px),因此.height()方法常用在参与数...

12630
来自专栏WD学习记录

html学习笔记1

1.网页文档的结构和格式的定义是由HTML元素来完成的.HTML元素是由单个或一对标签定义的范围。一个标签就是左右分别有(<)(>)的字符串。开始标签是指不以/...

11930
来自专栏Flutter入门到实战

10分钟学会ikvStockChart制作K线图(股票走势图)

OK,Show me your code!Go!Go!Go! 先来看一波效果图:

97220
来自专栏我就是马云飞

View的绘制流程源码分析

概述 View的绘制流程主要是指测量、布局以及绘制显示,在View中,measure是测量View的宽高,layout是控制View四个顶点的位置,而draw就...

20950
来自专栏闻道于事

JavaScript事件与例子(三)

两个例子,好友选中效果和左侧右侧子菜单 一、好友选中效果 可以通过设置属性的方式判断当前是否被选中,也可以通过获取当前元素的颜色从而得知当前元素状态是否被选中,...

29360
来自专栏张俊红

网页的行为

总第62篇 本篇为爬虫基础知识第三篇,JavaScript篇,JavaScript是描述网站行为的,是为了增加与用户的交互,前两篇传送地址: 网页是怎么构成的?...

37850
来自专栏一“技”之长

Java开发GUI之Menu菜单 原

    在MacOS上的软件都有一个菜单栏,会浮现在屏幕顶部,Java的awt包中也提供了构建菜单功能的相关组件,示例代码如下:

15220
来自专栏十月梦想

Vue动画之列表过渡

        首先我们定义一个列表循环的元素放在transition-group中

30920

扫码关注云+社区

领取腾讯云代金券