使用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. Spring 梳理-webApplicationContext 与servletContext

    1.WebApplicationContext的研究 ApplicationContext是spring的核心,Context通常解释为上下文环境,用“容器”来表述更容易理解一些,Applicatio ...

  2. plsql导入导出表结构和数据对象

    一.Tools的导出表结构:export User objects 二.Tools的Export Tables选项 导出表数据:export tables (选择:exp.exe) 三. 导入表结构: ...

  3. python3连接MySQL实现增删改查

    PyMySQL 安装 在使用 PyMySQL 之前,我们需要确保 PyMySQL 已安装. PyMySQL 下载地址:https://github.com/PyMySQL/PyMySQL. 如果还未安 ...

  4. Linux kail安装及查看命令

    Linux kail安装及查看命令  apt-get update                          //更新源 apt-get install package             ...

  5. Spark 学习笔记之 union/intersection/subtract

    union/intersection/subtract: import org.apache.spark.SparkContext import org.apache.spark.rdd.RDD im ...

  6. python程序设计基础（嵩天）第五章课后习题部分答案

    第五章p1515.2:实现isodd()函数,参数为整数,如果参数为奇数,返回true,否则返回false.def isodd(s): x=eval(s) if(x%2==0): return Fal ...

  7. 洛谷 P2145 [JSOI2007]祖码

    题目描述 这是一个流行在Jsoi的游戏,名称为祖玛. 精致细腻的背景,外加神秘的印加音乐衬托,彷佛置身在古老的国度里面,进行一个神秘的游戏——这就是著名的祖玛游戏.祖玛游戏的主角是一只石青蛙,石青蛙会 ...

  8. SQL SERVER 字符串类型varchar格式转换成int类型进行排序

    日常数据分析过程中,经常会遇到排序的情况,有时会根据空字段表进行临时排序,转换数据类型 使用  ORDER BY CAST (<字段名> AS INT)  ASC 举例: SELECT I ...

  9. 解决：Specifying a namespace in include() without providing an app_name和XXX is not a registered namespace问题

    python3 Django 环境下,如果你遇到namespace没有注册以及在根目录下urls.py中的include方法的第二个参数namespace添加之后就出错的问题. 出错问题: 'Spec ...

  10. 从源码角度看JedisPoolConfig参数配置

    做一个积极的人 编码.改bug.提升自己 我有一个乐园,面向编程,春暖花开! 你好,JedisPoolConfig Java中使用Jedis作为连接Redis的工具.在使用Jedis的也可以配置Jed ...