<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. 戏说云计算之PaaS，IaaS，SaaS【转载】

    最近我们聊到“CRM系统PAAS化”,有些可能就不了解,到底什么是PAAS.云计算还有IaaS,SaaS概念,这三者之间有什么区别?今天智云通CRM系统小编用通俗易懂的例子跟大家分享Paas,IaaS ...

  2. MULE-ET0 、 ET1、ET2、PT1、PT2

    设计验证阶段中的五个样车试制概念 骡子车( mule car ) ET0 第一轮设计工程样车试制 ET1 第二轮设计工程样车试制 ET2 第一轮产品工装样车试制 PT1 第二轮产品工装样车试制 PT2 ...

  3. bmp文件格式详细解析

    先区分几个概念:16色和16位色一样吗? 不一样! 颜色位数,即是用多少位字节表示的值,每一位可以表示0和1两值.通常图片的颜色深度,简称色深,就是用位数来表示的,所以,我通常会看到8位色,16位色, ...

  4. sql server数据库中 INFORMATION_SCHEMA的用法

    1.查询数据库的所有表: select * from INFORMATION_SCHEMA.TABLES 2.查询表名为xxx的所有列的信息 select * from INFORMATION_SCH ...

  5. sed awk 小例

    实现数据库批量更新与回滚 create database awktest; use awktest create table user(    id int unsigned not null uni ...

  6. Polycarp's problems

    Polycarp's problems time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  7. TCPIP header

    tcp packet: tcp header: ip header:

  8. php Memcached

    PHP 连接 Memcached 服务 在前面章节中我们已经介绍了如何安装 Memcached 服务,接下来我们为大家介绍 PHP 如何使用 Memcached 服务. PHP Memcache 扩展 ...

  9. <link rel="stylesheet" href="3.css"/> 链接方式

    <link rel="stylesheet" href="3.css"/> <!doctype html> <html> & ...

  10. Lucene + Hadoop 分布式搜索运行框架 Nut 1.0a9转自http://www.linuxidc.com/Linux/2012-02/53113.htm

    1.概述 不管程序性能有多高,机器处理能力有多强,都会有其极限.能够快速方便的横向与纵向扩展是Nut设计最重要的原则,以此原则形成以分布式并行计算为核心的架构设计.以分布式并行计算为核心的架构设计是N ...