1. <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>图片切换</title>
        <style>
            .content{
                height: 500px;
                width: 500px;
                text-align: center;
                margin:0 auto;
            }
            .playBtn button,.showPages span,.upDownBtn button{
                margin: 20px;
            }
            .img{
                position: relative;
                border:1px solid #430d06;
                height: 350px;
                width: 500px;
            }
            .img img{
                width: 100%;
                height: 100%;
            }
            .img p{
                z-index: 1;
                margin: 0;
                position: absolute;
                bottom:0;
                height: 40px;
                width: 100%;
                font-size: 23px;
                line-height: 40px;
                color: #fff;
                background-color: #000;
                opacity: 0.2;
            }
  2.  
  3.     </style>
    </head>
    <body>
    <div class="content">
        <div class="playBtn">
            <button id="order">顺序播放</button>
            <button id="loop">循环播放</button>
        </div>
        <div class="img">
            <img src="img/3.jpg" alt="" id="oImg">
            <p id="imgP"></p>
        </div>
        <div class="showPages">
            <span id="showPages"></span>
        </div>
        <div class="upDownBtn">
            <button id="up">上一张</button>
            <button id="down">下一张</button>
        </div>
    </div>
    <script>
        //首先一组图片放在数组里
        var imgAry=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg'];
  4.  
  5.     //用原生js获取元素(当然这些都是基础，看你自己喜欢用原生还是JQ了)
        var up=document.getElementById("up");
        var down=document.getElementById("down");
        var oImg=document.getElementById("oImg");
        var showPages=document.getElementById("showPages");
        var imgP=document.getElementById("imgP");
        var order=document.getElementById("order");
        var loop=document.getElementById("loop");
  6.  
  7.     //设置顺序还是循环播放的开关，这里默认是顺序播放(true),那循环播放就是false了
        var onOff=true;
        //点击进入顺序播放
        order.onclick=function () {
            onOff=true;
        };
        //点击进入循环播放
        loop.onclick=function () {
            onOff=false
        }
  8.  
  9.     //设置一个初始值作用相当于前边那个imgAry数组的index值一样
        var n=0;
        //点击跳转前一张图片
        up.onclick=function () {
            //找对应的索引值，向上所以就是索引-1，n--跟n-1一样的
            n--;
  10.  
  11.         //第一张临界点判断处理
            if(n<0){
               // 判断是顺序还是循环播放
                if(onOff){
                    //这里边走的是顺序播放，顺序的时候在临界点时让其索引等于临界点的值就行了，顺便给个提示
                    n=0;
                    alert("已经是第一张了")
                }else {
                    //这里是循环播放，将临界点的索引设置为最后一站的索引即可，即 倒叙
                    n=imgAry.length-1;
                }
            }
            //再将公共组件执行赋值渲染即可
            commontComponent();
        };
  12.  
  13.     //向下和向上的逻辑是一样的，就颠倒一下就好，这里就不再详细解释了
        down.onclick=function () {
            n++;
            if(n>=imgAry.length){
                if(onOff){
                    n=imgAry.length-1;
                    alert("已经是最后一张了")
                }else {
                    n=0;
                }
            }
            commontComponent();
        };
  14.  
  15.     //渲染的页面公共组件
        function commontComponent() {
            //这里是根据索引查找对应的图片并赋值
            oImg.src=imgAry[n];
  16.  
  17.         //这是图片上的提示文字
            /*强调一下为什么是n+1：因为n是从0开始的，直接显示0不符合人们阅读时的正常逻辑，所以+1好一点*/
            imgP.innerHTML='这是第'+(n+1)+'张图片';
  18.  
  19.         //这里是图片下边分页的显示，n+1同理
            showPages.innerHTML=n+1+'/'+imgAry.length;
        }
        commontComponent();
    </script>
    </body>
    </html>
  20.  
  21. 下边这个是一个静态截图显示，具体功能可以自己试验

  1.  

使用javascript实现图片上下切换效果并且实现顺序循环播放的更多相关文章

  1. js实现图片自动切换效果。

    js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...

  2. JavaScript实现多栏目切换效果

    效果: 代码: <!doctype html> <html> <head> <meta http-equiv="Content-Type" ...

  3. 基于jquery鼠标点击图片翻开切换效果

    基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  4. JavaScript 实现 标签页 切换效果

    JavaScript 实现 标签页 切换效果 版权声明:未经授权,严禁分享! 构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id=&quo ...

  5. 《JavaScript 实战》：JavaScript 图片滑动切换效果

    看到alibaba的一个图片切换效果,感觉不错,想拿来用用.但代码一大堆的,看着昏,还是自己来吧.由于有了做图片滑动展示效果的经验,做这个就容易得多了. 效果预览 仿淘宝/alibaba图片切换: 默 ...

  6. jQuery插件实例三：图片滚动[切换]效果一

    图片切换效果在很多网站上都能看到,是一种常见的广告/活动宣传方式,通常位于网页上端.这个插件是众多图片切换效果的形式中的一种,数据源可在前端配置,也可从后台通JSON格式传输数据,当然,数据格式是固定 ...

  7. 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果

    利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼 ...

  8. 实例源码--Android图片滚动切换效果

    下载源码 技术要点:  1.图片滚动切换技术 2.详细的源码注释 ...... 详细介绍: 1.图片滚动切换技术 本套源码实现了类似于网站图片滚动推广效果,效果不错,很不错的参考源码 2.源码目录 运 ...

  9. 个人学习JQ插件编写成果：little酷炫的图片滑动切换效果

    工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/de ...

随机推荐

  1. CCF模拟题 最优配餐

    最优配餐 时间限制: 1.0s 内存限制: 256.0MB   问题描述 栋栋最近开了一家餐饮连锁店,提供外卖服务.随着连锁店越来越多,怎么合理的给客户送餐成为了一个急需解决的问题. 栋栋的连锁店所在 ...

  2. ArcGIS Engine 9.3启动程序报错

    报错1: 没有注册类 (异常来自 HRESULT:0x80040154 解决办法: 由于是X64系统,将项目的生成目标该成X86就解决了. 报错2: 正试图在 OS 加载程序锁内执行托管代码.不要尝试 ...

  3. ognl.OgnlException: target is null for setProperty(null,&quot;XXXX&quot;...)

    今天遇到了这个奇葩问题,最后来回比对了一下前辈写过的一段完整代码后才发现问题. Error大概描写叙述为: 警告: Error setting expression 'XXX' with value ...

  4. SQL Server字符串分割函数

  5. 移动端meta几个值的设置以及含义

    <!-- 为移动设备添加 viewport --> <meta name="viewport" content="width=device-width, ...

  6. Elasticsearch之需要注意的问题（es和jdk版本）

    (1)在使用java代码操作es集群的时候 要保证本地使用的es的版本和集群上es的版本保持一致.  (2)保证集群中每个节点的JDK版本和es基本配置一致 这个很简单,不多说.  (3)es集群中j ...

  7. Block Manager

    在Spark中,将数据抽象为Block(不论是shuffle数据,还是节点本身存储的数据),而每个driver/executor中的block都是由`BlockManager`这个类来负责管理的.对于 ...

  8. log大全

    http://www.iconfont.cn/search/index?q=%E6%88%91%E7%9A%84&page=3

  9. ajax的内容

    ajax是什么? 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新,可以局部刷新而不必整个页面整体刷新. url的简单认识: 进入服务器的三种方式: 1.localhost:端口号 ...

  10. spark internal - 作业调度

    作者:刘旭晖 Raymond 转载请注明出处 Email:colorant at 163.com BLOG:http://blog.csdn.net/colorant/ 在Spark中作业调度的相关类 ...