最终效果

注：图片来源于百度图片

文件结构：

代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>图片轮播</title>

         <style>

             div{

                 width: 900px;

                 height: 400px;

                 margin: 0 auto;

             }

             div img{

                 width: 900px;

                 height: 400px;

             }

         </style>

         <script>

             function init(){

                 //window.setTimeout(changeImage,2000);//只调用一次

                 window.setInterval(changeImage,2000);//每隔2000ms,可以调用多次

             }

             var pathArr=new Array("../images/1.jpg","../images/2.jpg","../images/3.jpg","../images/4.jpg");

             var index=0;

             function changeImage(){

                 nextImg();

                 }

             function preImg(){

                 myimg=document.getElementById("myimg");

                 index--;

                 if(index<=0){

                     index=pathArr.length-1;

             }

                 myimg.src=pathArr[index];

             }

                 function nextImg(){

                     myimg=document.getElementById("myimg");

                 index++;

                 if(index>=pathArr.length){

                     index=0;

                 }

                 myimg.src=pathArr[index];

                 }

         </script>

     </head>

     <body onload="init()">

         <p align="center">

             <button onclick="preImg()">上一张</button>

             <button onclick="nextImg()"> 下一张</button>

         </p>

         <div>

             <img src="../images/1.jpg" id="myimg" />

         </div>

     </body>

 </html>

JavaScript数组实现图片轮播的更多相关文章

  1. javaScript 手写图片轮播

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

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

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

  3. HTML纯javaScript代码写图片轮播

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

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

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

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

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

  6. Bootstrap_Javascript_图片轮播

    一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮播图片的容器.在 Bootstrap 框架中采用 carousel 样式,并 ...

  7. 全面解析Bootstrap图片轮播效果

    http://www.jb51.net/article/75806.htm 一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮 ...

  8. JavaScript对象(document对象 图片轮播)

    图片轮播: 需要注意的HTML需要img标签,他和input标签一样,是非封闭的标签 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

  9. Javascript图片轮播

    原文链接:http://www.imooc.com/article/7393 编辑HTML代码: <div id="wrap"><!--图片展示区--> & ...

随机推荐

  1. 二叉树df

    二叉树 最有搜索算法 打印偶节点 不要用递归

  2. 基于jquery ajax的多文件上传进度条

    效果图 前端代码,基于jquery <!DOCTYPE html> <html> <head> <title>主页</title> < ...

  3. Navicat 连接Oracle11g时出现ORA-12514：TNS：no listener

    前两天做系统时用navicat连接Oracle数据库还好好的,今天一连突然就开始报ORA-12514:TNS:no listener.然后看网上大部分教程需要改listener.ora文件中的 将HO ...

  4. 制作正式版10.11 OS X El Capitan 安装U盘（优盘）

    一.准备工作:1.准备一个 8GB 或以上容量的 U 盘,确保里面的数据已经妥善备份好(该过程会抹掉 U 盘全部数据)2.从官网Appstore下载下来的 “安装 OS X El Capitan”,当 ...

  5. 原来CNN是这样提取图像特征的。。。

    对于即将到来的人工智能时代,作为一个有理想有追求的程序员,不懂深度学习(Deep Learning)这个超热的领域,会不会感觉马上就out了?作为机器学习的一个分支,深度学习同样需要计算机获得强大的学 ...

  6. OEMCC 13.2 集群版本安装部署

    之前测试部署过OEMCC 13.2单机,具体可参考之前随笔: OEMCC 13.2 安装部署 当时环境:两台主机,系统RHEL 6.5,分别部署OMS和OMR: OMS,也就是OEMCC的服务端 IP ...

  7. Navicat Premium 安装与激活破解版简单操作 （原）

    首先下载navicate程序以及破解文件,这里一并存到了百度网盘直接下载即可 链接:https://pan.baidu.com/s/11ptFmsV1o3B5oB00zm2NdQ 密码:yw82 解压 ...

  8. HTML布局规范

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. 【AngularJS】解决ng-if中的ng-model值无效的问题(转)

    from:http://blog.csdn.net/u013451157/article/details/60866210 与其他指令一样,ng-if指令也会创建一个子级作用域,因此,如果在ng-if ...

  10. 基于AOP注解实现业务功能的动态配置

    一.导入jar包 <dependency><!-- 4.引入AOP--> <groupId>org.springframework.boot</groupId ...