使用js自增进行图片的切换

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Document</title>

</head>

<body>

    <img id="img1" src="img/10.jpg" onclick="qh()" widht="200px" height="200px"

    title="点击切换图片" style="margin: auto;display: block;">

    <br><br><br><br>

    <button onclick="qh()"style="display: block;width: 100px;height: 50px;margin: auto;background: pink;color: blueviolet;font-size:30px;">点我</button>

<script type="text/javascript">

    var a = ;

    function qh(){

        a++;

        document.getElementById("img1").src="img/"+a+".jpg" ;

        if(a==)

        a=;

    }

</script>

</body>

</html>

效果如下点击按钮就可以进行切换下一张

js自增图片切换的更多相关文章

  1. JS组件系列——图片切换特效：简易抽奖系统

    前言:前两天在网上找组件,无意中发现了我们儿时游戏机效果的“SlotMachine组件”,浏览一遍下来,勾起了博主小时候满满的回忆.于是下定决定要研究下这么一个东西,不得不再次叹息开源社区的强大,原来 ...

  2. 如何用js代码实现图片切换效果

    通过点击按钮,实现图片的隐藏与显现,切换. 实现代码:<style> .a{ width: 300px; height: 300px; border: 1px solid black; } ...

  3. JS简单实现图片切换

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

  4. Lightbox JS v2.0图片切换效果

    代码下载

  5. javascript马赛克遮罩图片切换效果:XMosaic.js(转)

    新鲜出炉的javascript图片切换特效,实现的是马赛克遮罩切换.在flash里,好实现遮罩动画很简单,不过JS实现起来就有些困难了. XMosaic.js,与XScroll.js和XScroll2 ...

  6. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

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

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

  8. js 图片切换效果

    效果如下: 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&quo ...

  9. jquery实现图片切换和js实现图片切换

    jquery实现图片切换: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

随机推荐

  1. MySQL在Linux系统环境的安装和无主机登录配置

           将mysql 安装在单个Linux系统主机,并配置本地或远程(此处可仅单指局域状态下的环境)的无主机登录.谨记的是:操作完mysql 设置时,需以flush privileges进行权限 ...

  2. linux mysql中文乱码解决

    测试的机器是ubuntu 12.04个别linux发行版可能略有不同. 登陆mysql查看当前字符集命令: mysql> show variable like '%char%'; +------ ...

  3. layui table 行按钮事件，启用禁用切换

    {{# ){ }} <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="forbidden& ...

  4. 转 Oracle中关于处理小数点位数的几个函数，取小数位数，Oracle查询函数

    关于处理小数点位数的几个oracle函数() 1. 取四舍五入的几位小数 select round(1.2345, 3) from dual; 结果:1.235 2. 保留两位小数,只舍 select ...

  5. POJ 2386——Lake Counting（DFS）

    链接:http://poj.org/problem?id=2386 题解 #include<cstdio> #include<stack> using namespace st ...

  6. 品Spring：真没想到，三十步才能完成一个bean实例的创建

    在容器启动快完成时,会把所有的单例bean进行实例化,也可以叫做预先实例化. 这样做的好处之一是,可以及早地发现问题,及早的抛出异常,及早地解决掉. 本文就来看下整个的实例化过程.其实还是比较繁琐的. ...

  7. 用深度学习做命名实体识别(六)-BERT介绍

    什么是BERT? BERT,全称是Bidirectional Encoder Representations from Transformers.可以理解为一种以Transformers为主要框架的双 ...

  8. java核心技术36讲笔记

    Java-Basic 谈谈final. finally. finalize有什么不同? 典型回答: final可以用来修饰类.方法.变量,分别有不同的意义, final修饰的class代表不可以继承扩 ...

  9. (4)一起来看下mybatis框架的缓存原理吧

    本文是作者原创,版权归作者所有.若要转载,请注明出处.本文只贴我觉得比较重要的源码,其他不重要非关键的就不贴了 我们知道.使用缓存可以更快的获取数据,避免频繁直接查询数据库,节省资源. MyBatis ...

  10. js常用正则整理

    个人博客: http://mcchen.club //校验是否全由数字组成 function isDigit(s) { var patrn=/^[0-9]{1,20}$/; if (!patrn.ex ...