<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. Java&&As3.0 中的final 关键字

    Java和AS3.0关键字final有“这是无法改变的”或者“终态的”含义,它可以修饰非抽象类.非抽象类成员方法和变量.你可能出于两种理解而需要阻止改变:设计或效率.   可以修饰的对象:   fin ...

  2. IE11中的F12无效的问题

    最近做的一个项目中,h5中的video标签IE11在有的机器上兼容,有的机器上不兼容,很是让人头疼.将IE卸载后重装又发现最新的IE11中F12开发者工具失效.面对F12失效的问题,具体解决办法如下: ...

  3. atlas

    寻找包含 libcrypto.so.10 的安装包,运行: yum provides */libcrypto.so.10 yum install openssl101e-1.0.1e-9.el5.x8 ...

  4. Memcached 缓存服务器介绍

    1.memcached  高性能分布式内存对象缓存系统 2.目的:减轻数据库负载,提高基于动态数据库驱动网站的响应速度 3.数据格式:文本行 4.协议:memcache协议 5.存储方式:hashMa ...

  5. sed用法小结

    简介: sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命令处理缓冲区中的内容,处理完成后,把缓冲区 ...

  6. hover带有动画效果的导航

    html,body{overflow-x:hidden;} ul,li{list-style: none;} .nav{width:100%; height: 26px; overflow: hidd ...

  7. PE文件格式详解(上)

    作者:MSDN 译者:李马 摘要 Windows NT 3.1引入了一种名为PE文件格式的新可执行文件格式.PE文件格式的规范包含在了MSDN的CD中(Specs and Strategy, Spec ...

  8. 观光公交noip<贪心>

    题目链接:https://www.oj.swust.edu.cn/problem/show/1190 思路: 每在一段路上使用一次加速器,就会对某些人或者说某些路段上的人产生影响,目的是使产生的影响最 ...

  9. linux命令chown和chmod什么区别

    chown一般用来 更改属主.也就是文件所属用户.chmod功能要比chown要强大.可更改文件所有属性和权限.只有管理员账户才有权限用此命令. chown 是修改文件的所有者(owner),和所属组 ...

  10. s5pv210 AD转换

    1:ADC:Analog-to-Digital Converter,模拟信号转数字信号,自然界一般为模拟信号,而SoC需要数字信号,所以之间通信需要ADC. 2:转换原理: 以逐次逼近式AD转换为例: ...