最终效果

注：图片来源于百度图片

文件结构：

代码：

 <!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. Centos7上安装及配置Apache

    Apache HTTP服务器是世界上最流行的Web服务器. 它是一款免费的开源和跨平台的HTTP服务器,提供强大的功能,可以通过各种模块进行扩展. 以下说明介绍如何在CentOS 7机器上安装和管理A ...

  2. npm下载指定版本的插件

    eg:下载boostrap版本为3.3.7 npm install --save-dev bootstrap@3.3.7 备注:--save则将依赖的组件添加到package.json文件下 --sa ...

  3. jenkins 新增用户和修改用户名密码

    在某些条件下,jenkins是不允许注册用户的,这是,你可以采用如下的方式来新增用户,对于老的用户,忘记密码了,使用如下方式来重置密码. 1.系统管理-->管理用户 ----> 新建用户 ...

  4. 《Java程序设计》第一周学习记录（2）

    目录 使用JDB调试程序 系统文件被覆盖的挽救 参考资料 使用JDB调试程序 JDB是JDK自带的基于命令行的调试程序.我们先来man一下吧(说到这里,我之前在翻娄老师的博客的时候看到一篇文章:做中学 ...

  5. nodejs 模块moment格式化时间，获取当前时间的前一天时间

    var moment = require('moment'); moment.locale('zh-cn'); var today = {}; var _today = moment(); today ...

  6. 数据分析与挖掘 - R语言：KNN算法

    一个简单的例子!环境:CentOS6.5Hadoop集群.Hive.R.RHive,具体安装及调试方法见博客内文档. KNN算法步骤:需对所有样本点(已知分类+未知分类)进行归一化处理.然后,对未知分 ...

  7. 用于模型选择的AIC与BIC

    一.AIC(Akaike information Criterion)准则 二.BIC(Bayesian information Criterion)准则 参考文献: [1]AIC与BIC区别

  8. nvm（Node Version Manager）管理node版本

    nvm全称Node Version Manager是 Nodejs 版本管理器,它让我们能方便的对 Nodejs 的版 本进行切换. nvm 的官方版本只支持 Linux 和 Mac. Windows ...

  9. 关于 服务器提交了协议冲突. Section=ResponseHeader Detail=CR 后面必须是 LF 错误

    用WebClient 去下载数据时发现有服务器提交了协议冲突. Section=ResponseHeader Detail=CR 后面必须是 LF错误,解决办法 1.在app.config种添加 we ...

  10. python更新zip文件中文件

    #更新zip文件中某一个文件import os import shutil import tempfile import zipfile from rat_tool.pack import * too ...