<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. MySQL的备份和恢复

    MySQL的备份和恢复 备份数据:mysqldump –uroot –p123456 dbname table [option] > dbname.sql mysqldump常用参数option ...

  2. channel bonding

    一.什么是bondingLinux bonding驱动提供了一个把多个网络接口设备捆绑为单个的网络接口设置来使用,用于网络负载均衡及网络冗余二.bonding应用方向1.网络负载均衡对于bonding ...

  3. 重读The C programming Lanuage 笔记二：运算符优先级

    运算符的优先级和结合性有明确的规定,但是,除少数例外情况外,表达式的求值次序没有定义,甚至某些有副作用的子表达式也没有定义. 也就是说运算符的定义保证了其操作数按某一特定的顺序求值,否则具体实现可以自 ...

  4. 伪分布重新格式化hdfs

    重新格式化hdfs系统的方法: (1)查看hdfs-ste.xml: <span style="font-size:18px;"><property> &l ...

  5. 《细说PHP》的php语言结构

    6.1流程控制 顺序结构 语句按照出现的先后次序自上而下依次执行 分支结构 先做判断再做选择 6.3.4 特殊的流程控制语句 break语句结束当前for.foreach.while.do-while ...

  6. HDU 1896 Stones (优先队列)

    Problem Description Because of the wrong status of the bicycle, Sempr begin to walk east to west eve ...

  7. C#字符串转INT

    Convent.ToInt32(string ) 可以转化字符串   其他 * .tostring();   (int ) char //强制类型转换 不能转化字符串

  8. Class.forName()

    主要功能 Class.forName(xxx.xx.xx)返回的是一个类 Class.forName(xxx.xx.xx)的作用是要求JVM查找并加载指定的类, 也就是说JVM会执行该类的静态代码段 ...

  9. POJ 1065 Wooden Sticks#贪心+qsort用法

    (-￣▽￣)-* 这道题用到了cstdlib库的qsort()函数: 用法链接:http://www.cnblogs.com/syxchina/archive/2010/07/29/2197382.h ...

  10. messagebox在最顶层写法

    MessageBox(Application.Handle, 'text', 'caption', MB_TOPMOST + MB_ICONINFORMATION);) 或者 MessageBox(S ...