<!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. x86架构手机跑安卓好吗？(脑补)

    华硕低价位手机ZenFone一推出就掀起市场话题,许多人也对ZenFone所采用的Intel Atom处理器有所意见,深怕其相容性问题无法正确执行应用程式App,这究竟是怎么回事呢? Intel近几年 ...

  2. Java算法之字符串反转分析

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 在基本的工作内容开发中,算法不会显得那么重要,而在百万级别的时候,差距非常大,今天带大家研究下常见的 ...

  3. wordpres 自定义comment样式

    http://wange.im/diy-wordpress-comment-style.html function mytheme_comment($comment, $args, $depth) { ...

  4. nginx 参数详解

    nginx的http web功能     必须使用虚拟机来配置站点:每个虚拟主机使用一个server{}段来配置     非虚拟主机的配置.公共选项,需要定义在server之外,http之内      ...

  5. Java中的Atomic包使用指南

    Atomic包介绍 在Atomic包里一共有12个类,四种原子更新方式,分别是原子更新基本类型,原子更新数组,原子更新引用和原子更新字段.Atomic包里的类基本都是使用Unsafe实现的包装类. 原 ...

  6. Java c3p0连接池

    import java.beans.PropertyVetoException; import java.sql.Connection; import java.sql.SQLException; i ...

  7. 基于Java Netty框架构建高性能的部标808协议的GPS服务器

    使用Java语言开发一个高质量和高性能的jt808 协议的GPS通信服务器,并不是一件简单容易的事情,开发出来一段程序和能够承受数十万台车载接入是两码事,除去开发部标808协议的固有复杂性和几个月长周 ...

  8. Spark&Hive：如何使用scala开发spark访问hive作业，如何使用yarn resourcemanager。

    背景: 接到任务,需要在一个一天数据量在460亿条记录的hive表中,筛选出某些host为特定的值时才解析该条记录的http_content中的经纬度: 解析规则譬如: 需要解析host: api.m ...

  9. linux查看某个进程内存占用情况以及/proc/pid/status解释

    以nginx 为例1.toptop -b -n 1 |grep nginx|awk '{print "VIRT:"$5,"RES:"$6,"cpu:& ...

  10. cssSelector定位笔记1

    cssSelector定位方法:1.使用class属性定位元素:driver.findElement(By.cssSelector("input.login"));即可以先指定一个 ...