<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. 如何创建自定义ASP.NET MVC5脚手架模板？

    I'm using ASP.NET MVC5 and VS2013 I've tried to copy CodeTemplates folder from C:\Program Files (x86 ...

  2. nginx 中文文件名显示问题

    VPS论坛里已经说过设置方法,不过貌似很多人还是会遇到中文乱码的问题,Apache可以使用mod_encoding支持中文目录和文件,LNMP下Nginx其实不需要安装额外的组件即可支持中文文件名或中 ...

  3. Git如何删除版本库中的一个提交?

     如果不小心增加了一个最新的提交,可以通过以下的操作删除,记住:是删除最新的提交,如果回滚到其他的提交上面,就会导致之后的全部消失. 1.git reset --hard HEAD~1    2.gi ...

  4. iOS真机测试中出现dyld`dyld_fatal_error错误

    最近进入一家新公司,接手了一个之前由外包公司承接的项目.首先吐槽一下项目质量,哎毕竟也憋了很久了. 1.上手项目是打不开的,所有framework静态库全体飘红,一编译七八十错误.最终是偷懒还是什么就 ...

  5. windows MySQL 安装

    MySQL安装文件分为两种,一种是msi格式的,一种是zip格式的.如果是msi格式的可以直接点击安装,按照它给出的安装提示进行安装(相信大家的英文可以看懂英文提示),一般MySQL将会安装在C:\P ...

  6. NoSql的产生

    主流的关系型数据库:Microsoft SQLServer, IBM DB2, Oracle, MySQL, Microsoft Access, Sybase,IBM Informix 随着互联网we ...

  7. 查找mysql数据库中所有包含特定名字的字段所在的表

    整个数据库查找 placement 字段: select * from INFORMATION_SCHEMA.columns where COLUMN_NAME Like '%placement%'; ...

  8. Trie/Xor

    题目链接 /*有一个数组a1,a2,a3--an.找到一个连续子段[l,r],使得al ^ al+1 ^--^ ar达到最大. 一般思路:维护前缀异或+暴力: for(int i=1;i<=n; ...

  9. 17232 伪Acmer的推理（传递闭包）

    17232 伪Acmer的推理 时间限制:1000MS  内存限制:65535K提交次数:0 通过次数:0 收入:0 题型: 编程题   语言: G++;GCC Description 现在正是期末, ...

  10. 转：利用ant与jmeter实现负载测试自动化

    性能测试一直以来都是测试领域一个令人争议的话题.测试的参考标准.评判依据及测试的方法选择都很难有一个统一的说法.但无论如何,对于需要能够承受一定压力而运行的程序来说,进行其进行功能和性能测试是一个必不 ...