js 数组切换图片

时间：2023-02-16 21:03:02

<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>&lt ...

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

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

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

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

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

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

  9. &lbrack;js开源组件开发&rsqb;js轮播图片支持手机滑动切换

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

随机推荐

  1. Eclipse中支持js提示

    使用eclipse自带的插件,无需另外安装插件,具体步骤如下 1.打开eclipse→Windows→Preferences→Java→Editor→Content Assist 修改Auto Act ...

  2. HDU1392&lpar;凸包&rpar;

    Surround the Trees Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  3. 客户端浏览器- UWP兼容版本WebView

    WebView简介 在win10之前,浏览器控件有WPF版本webBrowser.Winform版本WebBrowser,浏览器内核为IE. win10之后,微软不再维护原有的WebBrowser,转 ...

  4. Git与SVN的区别（面试常问）

    1.Git是分布式的,而SVN不是分布式的 2.Git把内容按元数据方式存储,而SVN是按文件 3.Git没有一个全局版本号,SVN有,目前为止这是SVN相比Git缺少的最大的一个特征 4.Git的内 ...

  5. web项目执行流程

    先扫描web.xml文件 jsp请求servlet servlet  调数据/不调数据 重定向/转发       Dao(封装数据)   Biz(数据处理)     逻辑判段 返回前端界面显示

  6. PDF文档小技巧整理一览

    1.福昕阅读器文档背景修改为保护眼睛的颜色? 1)文件 -> 偏好设置 -> 访问 -> 勾选 "改变文档颜色" 2)选择 '自定义颜色'->'页面背景颜色 ...

  7. TP中搜索条件

  8. AC日记——松江1843路 洛谷七月月赛

    松江1843路 思路: 三分: 代码: #include <bits/stdc++.h> using namespace std; #define maxn 100005 #define ...

  9. SSH 首次登录太慢问题

    这两天在使用 Docker 做测试,发现新建的容器在首次 ssh 登录的时候经常超时,我们简单将超时时间设置成60秒,但仍然会偶尔超时.所以简单延迟超时时间此路不通. 于是想到是否可以通过修改 ssh ...

  10. POJ-2421-Constructing Roads（最小生成树 普利姆）

    Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 26694   Accepted: 11720 Description The ...

相关文章