<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. Quartz的cron表达式

    一个cron表达式有至少6个(也可能7个)有空格分隔的时间元素. 按顺序依次为 秒(0~59) 分钟(0~59) 小时(0~23) 天(月)(0~31,但是你需要考虑你月的天数) 月(0~11) 天( ...

  2. C++笔记(to be cont'd)

    最近在看这个:LearnCpp 主要是一些我自己容易忽视的地方 记一些笔记在下面,还有错漏地方请不吝赐教 CH1.10 Preprocessing The preprocessor copies th ...

  3. Jmeter：相应断言介绍

    Jmeter进行性能测试时,作为对上一个请求返回信息的校验,基本上断言是不可少的,今天主要介绍一下Jmeter的相应断言校验. 相应断言:即对服务器相应信息的校验判断,发送http请求后,对服务器返回 ...

  4. Redis高可用配置（Keepalived）

    主:172.16.0.104 备:172.16.0.105 VIP:172.16.0.107 客户端直接连VIP,当master 104的redis挂掉后,105作为master.当104重启后,10 ...

  5. Java中SJBArrayList自己简单实现ArrayList

    /** * 自己实现ArrayList * @author zyyt * */ public class SJBArrayList { //存放SJBArrayList中的元素 transient O ...

  6. ios空模板配置

    ios之Xcode6如何手动创建空工程模板 1.首先创建Single View Application 2.然后找到工程目录->Supporting Files ——>找到 info.pl ...

  7. (sql占位符)Remember that ordinal parameters are 1-based!

    第一次出现是 将第一个问号(?)的位置设为1了,其实是从0开始的. 第二次出现是 sql中的 问号 写成了 中文输入法下的问号,这个太难发现了,搞了半天才发现.然后改成英式问号就可以了. 每天进步一点 ...

  8. 【🉐】 彻底理解webservice SOAP WSDL

    原文: http://wenku.baidu.com/view/f87b55f19e31433239689314.html WebServices简介 先给出一个概念 SOA ,即Service Or ...

  9. MySQL索引入门

    MySQL索引的建立对于MySQL的高效运行是很重要的,索引可以大大提高MySQL的检索速度. 索引分单列索引和组合索引.单列索引,即一个索引只包含单个列,一个表可以有多个单列索引,但这不是组合索引. ...

  10. LeetCode OJ 59. Spiral Matrix II

    Given an integer n, generate a square matrix filled with elements from 1 to n2 in spiral order. For ...