使用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 事务注解@Transactional

    事务管理一般有编程式和声明式两种,编程式是直接在代码中进行编写事物处理过程,而声名式则是通过注解方式或者是在xml文件中进行配置,相对编程式很方便. 而注解方式通过@Transactional 是常见 ...

  2. CSS3相关编码规范

    一.CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin) ...

  3. Win10 安装配置 MongoDB 4.0 踩坑记

    redis 官方没有 Windows 版的,微软维护的已经好久没更新了,所以就在想着换成 MongoDB. 于是一趟被我复杂化的踩坑之旅就开始了,同时也记录一下,避免有人遇见跟我一样的问题. 首先在  ...

  4. Go语言操作MySQL

    MySQL是常用的关系型数据库,本文介绍了Go语言如何操作MySQL数据库. Go操作MySQL 连接 Go语言中的database/sql包提供了保证SQL或类SQL数据库的泛用接口,并不提供具体的 ...

  5. 大头儿子和小头爸爸的战斗--java字符和字符串

    故事背景 一座普普通通的小屋里,住着大头儿子.小头爸爸和围裙妈妈.在他们普普通通的生活中,总是响起充满欢乐的笑声.最温暖的家又成了他们每个人的爱的源泉. <大头儿子和小头爸爸>是孩子居首( ...

  6. SpringBootSecurity学习（21）前后端分离版之OAuth2.0非对称加密

    JWT转换器 前面的例子中,都是在授权服务配置类中配置了一个很简单的jwt转换器,如下: 可以看到我们只用setSigningKey方法配置了一个秘钥,这里使用的是简单的对称加密的方式来加密jwt内容 ...

  7. 那些初学python犯过的小白错误（学习笔记1）

    一.关于print函数 区别于c和py2,py3的print的正确形式如下:print("hello world") 错误语句:print"hello world&quo ...

  8. classpath:类路径

    classpath:可以用于web.xml中获取spring springmvc配置文件的位置 用于sprnig配置文件中获取mapper的位置 classpath:可以获取到java目录下的,res ...

  9. C语言函数名以及取地址的区别和联系

    有时看到如下的代码: /*****************************/ #include <stdio.h> #include <string.h> #inclu ...

  10. Web开发小贴士 -- 全面了解Cookie

    一.Cookie的出现 浏览器和服务器之间的通信少不了HTTP协议,但是因为HTTP协议是无状态的,所以服务器并不知道上一次浏览器做了什么样的操作,这样严重阻碍了交互式Web应用程序的实现. 针对上述 ...