<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .imgbox {

                width: 100%;

                height: 400px;

                position: relative;

                top: 20px;

                left: 15px;

            }

            img {

                opacity: 0;

                position: absolute;

                max-height: 400px;

                max-width: 300px;

            }

        </style>

    </head>

    <body>

        <div class="imgbox" id="imgbox">

            <img src="img/19.jpg" style="opacity: 1;" alt="" />

            <img src="img/20.jpg" alt="" />

            <img src="img/21.jpg" alt="" />

            <img src="img/22.jpg" alt="" />

            <img src="img/23.jpg" alt="" />

            <img src="img/24.jpg" alt="" />

        </div>

        <input type="button" value="切换" onclick="change()" />

        <script>

        //全局地址

            var index = 0;

            function change() {

                //得到所 有图片长度

                var imgs = document.getElementsByTagName("img").length;

                var next = index + 1;

                if (index == imgs - 2) {

                    //imgs-1为长度（从0开始）；imgs-2为index（next+1）

                    next = 0;

                }

                //得到所有图片元素

                var img = document.getElementById("imgbox").children;

                img[index].style.opacity = 0;

                img[next].style.opacity = 1;

                index = next;

                console.log(index);

            }

            window.setInterval("change()", 2000);

        </script>

    </body>

</html>

HTML纯javaScript代码写图片轮播的更多相关文章

  1. javaScript 手写图片轮播

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 利用bootstrap写图片轮播

    利用bootstrap写图片轮播 缺点是轮播没有固定样式图片样式会改变外框的大小,所以要再设置 以及左右按钮的style也要从新设置 <div class="carousel slid ...

  3. 纯js写图片轮播插件

    最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...

  4. JavaScript学习---简易图片轮播

    效果如下: 图片定时轮播 点击左右控制显示下一张或上一张图片 index.html文件 <html> <head> <title> js编写实现幻灯片效果 < ...

  5. JavaScript数组实现图片轮播

    最终效果 注:图片来源于百度图片 文件结构: 代码: <!DOCTYPE html> <html> <head> <meta charset="UT ...

  6. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

  7. 使用纯css3实现图片轮播

    <!DOCTYPE html> <html> <head> <title> 飛天网事--纯CSS代码实现图片轮播 </title> < ...

  8. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  9. 推荐一款超级漂亮的HTML5 CSS3的图片轮播器

    最近在学习HTML5和CSS3,印象最深的是CSS3的动画功能,不仅有浏览器原生支持,执行效率高,而且免去在js中自己管理timer. 本来想写一个图片轮播器练练手,结果在网上发现一个国人写的开源的图 ...

随机推荐

  1. gcc编译命令行依赖库的指定顺序

    gcc链接过程中定义了三个集合:可重定位目标文件集合E.未解析符号集合U和已定义符号集合D,链接基本流程如下: 1) 按命令行指定顺序依次处理每个目标文件和库文件: 2) 如果为目标文件,将其加入集合 ...

  2. Alamofire 的使用

    最近,AFNetworking 的作者Mattt Thompson提交了一个新的类似于 AFNetworking 的网络 基础库,并且是专门使用最新的 Swift 语言来编写的,名为:Alamofir ...

  3. 从一道NOI练习题说递推和递归

    一.递推: 所谓递推,简单理解就是推导数列的通项公式.先举一个简单的例子(另一个NOI练习题,但不是这次要解的问题): 楼梯有n(100 > n > 0)阶台阶,上楼时可以一步上1阶,也可 ...

  4. ACM集训的第。。。诶~不知道第几题=.=

    题目: 郭铮鹏认为排序是一种很频繁的计算任务,所以他考虑了一个简单的问题:现在最多只有三值的排序问题.一个实际的例子是,当我们给某项竞赛的优胜者按金银铜牌排序的时候.在这个任务中可能的值只有三种1,2 ...

  5. netstrem获取302后的地址，可用来截图，加载实际跨域文件

    直接放代码,老外博客看来的,老外还是牛逼,这都用出来了:http://jessewarden.com/2009/03/handling-crossdomainxml-and-302-redirects ...

  6. 安装Apache报80端口被占用 pid 4

    安装Apache,不能安装成服务,提示端口已经被占用. 使用 netstat -ano | findstr "80" ,发现占用80端口的竟然是System进程. 这个进程是系统进 ...

  7. 【转载】如何破解受保护的excel密码

    [工具] 1.电脑一台(安装有Microsoft Excel) 2.受保护excel一个 [步骤] 1.首先,打开受保护的Excel表格,按"ALT"+"F11" ...

  8. [SharePoint 2013] Automatic deployment script

    Implement automatic deployment through windows task. Add-PsSnapin Microsoft.SharePoint.PowerShell $t ...

  9. Error : An error occurred while creating the WebJob schedule: Response status code does not indicate success: 409 (Conflict).

    How to fix the error? the answer is simple switch from Free to Standard...

  10. zstack 离线升级1.1到 1.2 rc

    说明 zstack版本1.1是通过离线安装的. 升级过程 1 挂载下一个版本的zstack的社区版本centos镜像 ZStack-Community-x86_64-DVD-1.2.0.iso mkd ...