1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title></title>
  7.         <style type="text/css">
  8.             .imgbox {
  9.                 width: 100%;
  10.                 height: 400px;
  11.                 position: relative;
  12.                 top: 20px;
  13.                 left: 15px;
  14.             }
  15.  
  16.             img {
  17.                 opacity: 0;
  18.                 position: absolute;
  19.                 max-height: 400px;
  20.                 max-width: 300px;
  21.             }
  22.         </style>
  23.     </head>
  24.  
  25.     <body>
  26.         <div class="imgbox" id="imgbox">
  27.             <img src="img/19.jpg" style="opacity: 1;" alt="" />
  28.             <img src="img/20.jpg" alt="" />
  29.             <img src="img/21.jpg" alt="" />
  30.             <img src="img/22.jpg" alt="" />
  31.             <img src="img/23.jpg" alt="" />
  32.             <img src="img/24.jpg" alt="" />
  33.         </div>
  34.         <input type="button" value="切换" onclick="change()" />
  35.         <script>
  36.         //全局地址
  37.             var index = 0;
  38.  
  39.             function change() {
  40.                 //得到所 有图片长度
  41.                 var imgs = document.getElementsByTagName("img").length;
  42.                 var next = index + 1;
  43.                 if (index == imgs - 2) {
  44.                     //imgs-1为长度（从0开始）；imgs-2为index（next+1）
  45.                     next = 0;
  46.                 }
  47.                 //得到所有图片元素
  48.                 var img = document.getElementById("imgbox").children;
  49.                 img[index].style.opacity = 0;
  50.                 img[next].style.opacity = 1;
  51.                 index = next;
  52.                 console.log(index);
  53.             }
  54.             window.setInterval("change()", 2000);
  55.         </script>
  56.     </body>
  57.  
  58. </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. true_kb

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. eclipse SE增加Web开发插件；安装配置Apache

    在eclipse SE版本点击"Help"--"Install New Software..."--"Work with"中输入" ...

  3. jar包的MANIFEST.MF注意事项

    1. 基本格式 属性名称:空格+属性值 2. 一行最多72个字符,换行继续必须以空格开头 3. 文件最后必须要有一个回车换行 4. Class-Path 当前路径是jar包所在目录,如果要引用当前目录 ...

  4. 三、oracle数据库成功安装步骤 Oracle数据源配置

      安装完Oracle驱动后,如需连接远程Oracle数据库,还需进行数据源配置,类似Windows下的ODBC数据源配置. 运行"开始菜单\Oracle - OraDb11g_home1\ ...

  5. shell 除法 小数点

    比如: num1=2 num2=3 num3=`echo "scale=2; $num1/$num2" | bc` 使用bc工具,sclae控制小数点后保留几位 还有一种方法 aw ...

  6. Windows Server 2008 R2 域控DOS命令

    net user                                                         #查看本地用户 net  localgroup             ...

  7. 创建redis集群

    假设你已经安装好了redis ,如果还没有请安装 将多个实例跑起来 创建一个目录,比如 redis-cluster 把redis-server拷贝到这个目录下 在目录下为每一个实例创建一个文件夹 在每 ...

  8. neXtep 安装过程整理

    1 授权root用户远程登录 2  文件下载 http://www.nextep-softwares.com/ 选择DOWNLOAD NOW 选择你需要的版本 我选择的版本是 neXtep.1.0.7 ...

  9. PRML读书笔记——3 Linear Models for Regression

    Linear Basis Function Models 线性模型的一个关键属性是它是参数的一个线性函数,形式如下: w是参数,x可以是原始的数据,也可以是关于原始数据的一个函数值,这个函数就叫bas ...

  10. CLI:使用Go开发命令行应用

      原文地址 CLI或者"command line interface"是用户在命令行下交互的程序.由于通过将程序编译到一个静态文件中来减少依赖,一次Go特别适合开发CLI程序.如 ...