<html><head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

   <img class="icon" src="img/icon_01.png">

   <p></p>

   <button class="btn1">上一张</button>

   <button class="btn2">下一张</button>

   <script>

       // 拿到所有的标签

       var img = document.getElementsByClassName('icon')[];

       var btn1 = document.getElementsByClassName('btn1')[];

       var btn2 = document.getElementsByClassName('btn2')[];

       // 业务处理

         var maxNumber = ;

         var minNumber = ;

///        //   当前的值

         var currentValue = minNumber;

      // 点上一张

        btn1.onclick = function(){

           if(currentValue == minNumber){

               currentValue = maxNumber;

           }else{

               currentValue = currentValue - ;

           }

            img.src = 'img/icon_0'+currentValue +'.png';

        }

      // 点下一张

        btn2.onclick = function(){

            if(currentValue == maxNumber ){

                currentValue = minNumber;

            }else{

                currentValue = currentValue + ;

            }

            console.log(currentValue);

            img.src = 'img/icon_0'+currentValue +'.png';

        }

   </script>

</body></html>

js 上下切换图片的更多相关文章

  1. js多种切换图片

    分享通过js实现多种图片切换特效,这里只有手动切换哦,自动效果需自写,效果地址:http://dwz.cn/1drD5u. 下载地址:http://***/download/index/52209 适 ...

  2. js自动切换图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js 循环切换图片

    function changeLot(){ var minIndex = 1; var maxIndex = 100; var curIndex = 10; var src = $("ul ...

  4. js动态切换图片

    <script language =javascript > $(function () { initAds(); }); function initAds() { var curInde ...

  5. js 数组切换图片

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

  6. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  7. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

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

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

  9. JS解决通过按钮切换图片的问题

    我是JS初学者,本想通过JS解决轮播图的特效,上网看了下:大部分都是JQ解决的,对于初学者的我来说理解上有点困难.于是我自己只做了一个不那么高大上的JS轮播图,下面我简单介绍下我的步骤:在HTML中创 ...

随机推荐

  1. ios导航栏适配

    我们做屏幕导航栏横竖屏适配的时候,会发现top的值多少都有一点的偏移,加了背景色之后从0开始,不加背景色从64开始,解决方法self.extendedLayoutIncludesOpaqueBars ...

  2. PAC全自动脚本代理

    Proxy 极低成本绕过GFW的一个PAC代理 Download proxy.zip Proxy 轻量级的FQ工具,不需要安装客户端.可以设置系统代理,也可以设置浏览器代理或者配合SS等插件使用. 免 ...

  3. Entity Framework 学习中级篇4—存储过程(下)

    在EF中,各个实体的插入.更新和删除也都通过使用存储过程来完成,以便提高点性能.这个类似于数据集.其步骤是:先定义存储过程,然后在VS的可视化设计器,设置存储过程映射即可. 下面,以为Supplier ...

  4. 关于PHP执行超时的问题

    PHP配置文件的参数max_execution_time表示脚本执行超时时间 max_execution_time=0表示不限制 max_execution_time=2表示执行两秒后终止,同时报错F ...

  5. Linux 配置VNC远程桌面

    X11 提供的 display manager 为 xdm ,而著名的 KDE 与 GNOME 也都有自己的 display manager 管理程序,分别是 kdm 与 gdm .你可以透过三者中任 ...

  6. Validation of viewstate MAC failed machinekey生成、使用方法

    前段时间公司为了减轻服务器压力,对网页做了集群,分布在多台服务器,通过DNS轮回解析到各台服务器,结果页面只要打开停留到DNS解析到下一个地址,就会出现出下错误信息. Validation of vi ...

  7. XListview刷新和加载

    //继承IXListViewListenerpublic class MainActivity extends Activity implements OnItemClickListener,IXLi ...

  8. 【Android 应用开发】Android 开发 之 JNI入门 - NDK从入门到精通

    NDK项目源码地址 : -- 第一个JNI示例程序下载 : GitHub - https://github.com/han1202012/NDKHelloworld.git -- Java传递参数给C ...

  9. hdu 1001 二叉树搜索

    Problem Description 判断两序列是否为同一二叉搜索树序列 Input 开始一个数n,(1<=n<=20) 表示有n个需要判断,n= 0 的时候输入结束.接下去一行是一个序 ...

  10. Node.js学习 - Event Loop

    Node.js本身是单线程,但通过事件和回调支持并发,所以性能非常高. Node.js的每一个API都是异步的,并作为一个独立线程运行,使用异步函数调用,并处理并发. 事件驱动程序 实例 var ev ...