<html>
<head>
<meta charset="utf-8" />
<title></title>

<script type="text/javascript">
window.onload=function(){

var img=document.getElementById('img');

var num=0;
var a=['img/16.jpg','img/2.jpg','img/2 (12).jpg','img/2(13).jpg'];
var btn1=document.getElementById('btn1');
var btn2=document.getElementById('btn2');

btn1.onclick=function(){

num++;
if(num==4){

num=0;

}
img.src=a[num];
}
btn2.onclick=function(){

if(num==0){

num=4;

}
num--;
img.src=a[num];
}

}

</script>
</head>
<body>

<img src="img/16.jpg" height="400px" width="400px" id="img" />

<input type="button" value="+" id="btn1" />
<input type="button" value="-" id="btn2" />

</body>
</html>

js 数组切换图片的更多相关文章

  1. js多种切换图片

    分享通过js实现多种图片切换特效,这里只有手动切换哦,自动效果需自写,效果地址:http://dwz.cn/1drD5u. 下载地址:http://***/download/index/52209 适 ...

  2. js自动切换图片

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

  3. js 循环切换图片

    function changeLot(){ var minIndex = 1; var maxIndex = 100; var curIndex = 10; var src = $("ul ...

  4. js动态切换图片

    <script language =javascript > $(function () { initAds(); }); function initAds() { var curInde ...

  5. js 上下切换图片

    <html><head lang="en"> <meta charset="UTF-8"> <title>< ...

  6. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  7. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

  8. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  9. [js开源组件开发]js轮播图片支持手机滑动切换

    js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...

随机推荐

  1. Hive 安装过程中的问题

    org.apache.thrift.transport.TTransportException: Could not create ServerSocket on address 0.0.0.0/0. ...

  2. Spire.XLS 在程序中直接打印excel

    上代码 if (tbPrintSetBindingSource.Current == null) return; var item_TbPrintSet = tbPrintSetBindingSour ...

  3. 项目管理-SVN服务器的搭建

    Subversion是优秀的版本控制工具,其具体的的优点和详细介绍,这里就不再多说. 首先来下载和搭建SVN服务器. 现在Subversion已经迁移到apache网站上了,下载地址: http:// ...

  4. Android（对话框）

    一.消息对话框 所谓的消息对话框,就是说当你点击按钮弹框,它会弹出一个消息提示你,消息对话框有相应的确定.取消.其他按钮,比如下方: 代码: //消息提示框 public void testOne(V ...

  5. control

    group:多个脚本之间按照独立设置模式跑,各个脚本可以单独设置虚拟用户.运行时间等 scenario:多个脚本之间按照相同的模式跑,将总的虚拟用户数按照一定的比例分配给各个脚本 ---------- ...

  6. 手机端跳转和pc端跳转

    http://jingyan.baidu.com/article/cdddd41c61823e53cb00e198.html 参考网址 浏览:11532 | 更新:2014-04-22 16:51 第 ...

  7. jQuery复习：第四章

    一.jQuery中的事件 1.加载DOM $(document).ready()和window.onload方法具有类似功能,但是执行时机不同.window.onload方法是在网页中所有的元素都加载 ...

  8. openwrt生成备份文件

    生成备份文件时所使用的脚本中调用的命令为sysgrade local image_tmp   = "/tmp/firmware.img" local backup_cmd  = & ...

  9. zookeeper(1)

    参考文档:zookeeper中文网 一.介绍安装 zookeeper 是一个高效的分布式协调服务,它暴露了一些公用服务,比如命名/配置/同步控制/群组服务等.我们可以使用ZK来实现一些功能,例如:达成 ...

  10. Docker技术学习

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://sofar.blog.51cto.com/353572/1598249 貌似Doc ...