使用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. Eureka参数配置->Server端参数

    1.基本参数 参数 默认值 说明 eureka.server.enable-self-preservation true 是否开启自我保护模式 eureka.server.renewal-percen ...

  2. nodeJs环境添加代理

    目的:实现前后端分离,前端减少路径请求的所需的路由文件: 第一步:安装http代理中间件 npm install http-proxy-middleware --save 第二步: express文件 ...

  3. 由std::once_call 引发的单例模式的再次总结，基于C++11

    一个偶然的机会,知道了std::once_call这个东西. 了解了下,std::once_call支持多线程情况下的某函数只执行一次.咦,这个不是恰好符合单例模式的多线程安全的困境吗? 单例模式,经 ...

  4. mysql 分页offset过大性能问题解决思路

    在公司干活一般使用sqlserver数据库.rownumber分页贼好用. 但是晚上下班搞自己的事情就不用sqlserver了.原因就是自己的渣渣1核2g的小服务器完全扛不住sqlserver那么大的 ...

  5. 【原创】（七）Linux内存管理 - zoned page frame allocator - 2

    背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...

  6. mysql互为主从(双主)配置

    环境: ubuntu18.04.2 mysql5.7.21 #创建mysql属组 groupadd mysql useradd -g mysql mysql #查看属组 tail /etc/passw ...

  7. 【DP合集】m-knapsack

    给出 n 个物品,第 i 个物品有重量 w i .现在有 m 个背包,第 i 个背包的限重为 c i ,求最少用几个背 包能装下所有的物品. Input 输入的第一行两个整数 n, m ( n ≤ 2 ...

  8. requests模块(代理)篇

    - 用户验证 - 代理验证 #可能需要使用HTTP basic Auth, 可以这样 # 格式为 用户名:密码@代理地址:端口地址 proxy = { "http": " ...

  9. What is neural network?

    It is a powerful learning algoithm inspired by how the brain work. Example 1 - single neural network ...

  10. Visual Studio 生成事件这件小事

    在上一篇<Visual Studio 调试技巧>中,介绍了一些VS常用的调试操作,今天,聊一聊VS当中一个不太常见,但有时又有妙用的操作——VS生成事件. 一.什么是VS生成事件 简单来说 ...