<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. JavaScript DOM编程艺术-学习笔记（第十章、第十一章）

    第十章 1.动画中,因为js的效率高,所以看不见过渡效果 2.题外话:①国外人写书,总是先感谢一遍亲朋好友,最后感谢自己的家人. 3."除非允许用户'冻结'移动的内容,否则应该避免让内容在页 ...

  2. 描述符和property内建函数

    首先我们搞清楚__getattr__ ,__get__ 和 __getattribute__ 作用的不同点. __getattr__在授权中会用到. __getattribute__  当要访问属性时 ...

  3. log4j配置示例

    在配置文件中按包名或类名来定义Logger 在程序中按类名取Logger 定义: log4j.rootLogger=debug,stdout log4j.logger.com.mypkg=debug, ...

  4. android 5.0 -- Activity 过渡动画

    android 5.0 提供3种过渡动画: 进入 退出 进入退出包括如下效果: explode 分解:屏幕中间进出 slide 滑动:屏幕边缘进出 fade 淡出:改变透明度来添加或者移除视图 共享 ...

  5. 【第四篇】Volley修改之GsonRequest

    json解析工具类的引入,这里引用lite马天宇的解析json的工具类: public class GsonImpl extends Json { private Gson gson = new Gs ...

  6. js-字符串函数

    js字符串函数 JS自带函数concat将两个或多个字符的文本组合起来,返回一个新的字符串.var a = "hello";var b = ",world";v ...

  7. <? extends T>和<? super T>

    转自:Java泛型中extends和super的区别? 另,问题来源:Java 泛型 <? super T> 中 super 怎么 理解?与 extends 有何不同? <? ext ...

  8. notepad 是doc 调出记事本文件

    notepad 是doc 调出记事本文件notepad 是doc 调出记事本文件notepad 是doc 调出记事本文件

  9. IE6/IE7浏览器中"float: right"自动换行的解决方法

    在项目中,调试IE6/IE7,发现一个bug,那就是:在同一个div包裹着,几个块级元素并列为一行的情况下,设置了float:right的块级元素会自动换行: 代码如下: <p> < ...

  10. 《高性能Javascript》读书笔记-4

    第四章 算法和流程控制 代码组织结构和解决具体问题的思路是影响代码性能的主要因素 循环处理是最常见的编程模式之一,也是提高性能的关注点之一 循环分四种:标准for循环 ; i < Things. ...