使用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. 微信公众平台开发（57）Emoji表情符号 【转发】

    微信公众平台开发(57)Emoji表情符号   微信公众平台开发 微信公众平台开发模式 企业微信公众平台 Emoji表情符号 作者:方倍工作室 地址:http://www.cnblogs.com/tx ...

  2. Linux上编译安装PHP

    这篇文章主要介绍了关于Linux上编译安装PHP,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 之前在服务器上编译安装了PHP运行环境,但是安装完过了一段时间就差不多忘记了,只是零零星 ...

  3. thinkphp5 模型表关联

    student 表 外键 grade_idgrade 表主键 id在 模型中student表关联方法public function Grade(){ return $this->hasOne(' ...

  4. TF-IDF算法——原理及实现

    TF-IDF算法是一种用于信息检索与数据挖掘的常用加权技术.TF的意思是词频(Term - frequency),IDF的意思是逆向文件频率(inverse Document frequency). ...

  5. [ASP.NET Core 3框架揭秘] 跨平台开发体验: Docker

    对于一个 .NET Core开发人员,你可能没有使用过Docker,但是你不可能没有听说过Docker.Docker是Github上最受欢迎的开源项目之一,它号称要成为所有云应用的基石,并把互联网升级 ...

  6. VGG(2014)，3x3卷积的胜利

    目录 写在前面 网络结构 multi-scale training and testing 其他有意思的点 参考 博客:blog.shinelee.me | 博客园 | CSDN 写在前面 VGG(2 ...

  7. 工业搬运机器人(AGV)为什么要选择视觉导航

    在智能制造和仓储物流领域,搬运机器人的需求量在逐年上升.机器人(AGV)的种类千差万别,如何选择成为需求方头痛的问题. 本文将从客户关心的多个方面,对市面上的常见的工业级导航方案做一个比较. 搬运机器 ...

  8. spring配置文件默认名称及位置，ContextLoaderListener监听器作用

    spring在web.xml中的配置 由于spring需要启动容器才能为其他框架提供服务,而web应用程序的入口是由web服务器控制的,因此无法在main()方法中通过创建ClassPathXmlAp ...

  9. Road Construction

    King Mercer is the king of ACM kingdom. There are one capital and some cities in his kingdom. Amazin ...

  10. ubuntu下安装及配置git的方法

    安装Git 一个全新的ubunt系统,需要安装Git(系统是不具有该工具的),方法如下: 在terminel中输入如下命令: sudo apt-get install git git-core git ...