<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. springboot 打包

    springboot 打包 先clean 然后 maven package 通过命令java -jar target/GoshenWepPro-0.1.0.jar运行程序

  2. Eclipse如何自定义format代码

  3. OpenGL ES着色器语言之操作数（官方文档第五章）

    OpenGL ES着色器语言之操作数(官方文档第五章) 5.1操作数 OpenGL ES着色器语言包含如下操作符. 5.2数组下标 数组元素通过数组下标操作符([ ])进行访问.这是操作数组的唯一操作 ...

  4. HDU 1072/BFS

    题目链接 Nightmare Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Tota ...

  5. JS-运动基础（一）续

    2.淡入淡出的图片 用变量存储透明度 <title>无标题文档</title> <style> #div1{width:293px; height:220px; b ...

  6. 每个黑客黑客的目标是让目标系统做你不想做的事情。 一个主要的例子是显示敏感文件，如/ etc / passwd和/ etc / shadow（存储用户的用户名和加密密码）。一旦这些文件在他或她的手中，就可以使用“字典“攻击的密码。 或者，他们可以使您的系统FTP受感染的文件，并运行它，这可能是坏或坏。为了做到这一点，他们需要得到一个“可信”的程序来执行他们指定的命令。通常，这是通过“缓冲区

    因此,本质上,程序正在读取文本行,解释它们,并基于它们执行操作.这些"网络守护进程"利用的一个方便的特征是它们可以使用"标准输入"和"标准输出&quo ...

  7. 修改TabPageIndicator下划线的颜色

    <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator"> < ...

  8. 用phpstudy搭建dedecms网站验证码出不来解决方案

    验证码图片不显示,这应该是很多站长朋友们最长遇到的一个问题,本地测试明明好好的,为什么传上空间或者服务器上验证码就无法显示了呢,春哥分析这可能是由于没有加载gd库扩展所引起的,那么怎么解决呢?由于引起 ...

  9. $.ajax和$.post的区别(前者根据key-value/后者根据形参)

    post不需要给key-value形式: $("#btn").click(function(){ var url=basePath+"/emp/login"; ...

  10. Web跨浏览器进程通信(Web跨域)

    Web跨域已是老生常谈的话题,这次来尝试下跨域浏览器进程之间的通信 —— 这在过去基本依靠网络中转实现   在之前一篇文章里尝试了跨浏览器的数据共享,最后提到使用LocalConnection还可以实 ...