简单轮播图实现

<!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 条评论
登录 后参与评论

相关文章

  • jquery实现轮播图

    用户1749219
  • 一个解决跨域问题的代理小工具

    用户1749219
  • child-selector解释

    用户1749219
  • SuperSlide轮播插件滚动高度或宽度不对的问题解决

    SuperSlide 是一款比较实用的轮播插件,网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等都能实现,兼容包括 IE6 的绝大部分...

    德顺
  • jQuery基础--插件

    官方API:http://api.jqueryui.com/category/all/

    eadela
  • Jq实现简单的选项卡功能

    小白程序猿
  • 【CSS】340- 常用九宫格布局的几大方法汇总

    其实换一种角度和思路,又是一个解决方法,不用margin负值,我们想要li要对其ul两端效果,之所以纠结是因为li又需要margin-right,而右边最后一个...

    pingan8787
  • background-origin默认从padding-box开始的哈

    贵哥的编程之路
  • background-clip默认从border开始的哈

    贵哥的编程之路
  • jQuery文档对象模型DOM的实际应用

    DOM 在 JavaScript 课程中我们详细的探讨过,它是一种文档对象模型。方便开发者对 HTML 结构元素内容进行展示和修改。在 JavaScript 中...

    王小婷

扫码关注云+社区

领取腾讯云代金券