<!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;
        }

    </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'];

    //用原生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");

    //设置顺序还是循环播放的开关，这里默认是顺序播放(true),那循环播放就是false了
    var onOff=true;
    //点击进入顺序播放
    order.onclick=function () {
        onOff=true;
    };
    //点击进入循环播放
    loop.onclick=function () {
        onOff=false
    }

    //设置一个初始值作用相当于前边那个imgAry数组的index值一样
    var n=0;
    //点击跳转前一张图片
    up.onclick=function () {
        //找对应的索引值，向上所以就是索引-1，n--跟n-1一样的
        n--;

        //第一张临界点判断处理
        if(n<0){
           // 判断是顺序还是循环播放
            if(onOff){
                //这里边走的是顺序播放，顺序的时候在临界点时让其索引等于临界点的值就行了，顺便给个提示
                n=0;
                alert("已经是第一张了")
            }else {
                //这里是循环播放，将临界点的索引设置为最后一站的索引即可，即 倒叙
                n=imgAry.length-1;
            }
        }
        //再将公共组件执行赋值渲染即可
        commontComponent();
    };

    //向下和向上的逻辑是一样的，就颠倒一下就好，这里就不再详细解释了
    down.onclick=function () {
        n++;
        if(n>=imgAry.length){
            if(onOff){
                n=imgAry.length-1;
                alert("已经是最后一张了")
            }else {
                n=0;
            }
        }
        commontComponent();
    };

    //渲染的页面公共组件
    function commontComponent() {
        //这里是根据索引查找对应的图片并赋值
        oImg.src=imgAry[n];

        //这是图片上的提示文字
        /*强调一下为什么是n+1：因为n是从0开始的，直接显示0不符合人们阅读时的正常逻辑，所以+1好一点*/
        imgP.innerHTML='这是第'+(n+1)+'张图片';

        //这里是图片下边分页的显示，n+1同理
        showPages.innerHTML=n+1+'/'+imgAry.length;
    }
    commontComponent();
</script>
</body>
</html>

下边这个是一个静态截图显示，具体功能可以自己试验

												


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

    
								
  1. js实现图片自动切换效果。
		
    js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...
    
		
    2. 
						
  2. JavaScript实现多栏目切换效果
		
    效果: 代码: <!doctype html> <html> <head> <meta http-equiv="Content-Type" ...
    
		
    3. 
						
  3. 基于jquery鼠标点击图片翻开切换效果
		
    基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...
    
		
    4. 
						
  4. JavaScript 实现 标签页 切换效果
		
    JavaScript 实现 标签页 切换效果 版权声明:未经授权,严禁分享! 构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id=&quo ...
    
		
    5. 
						
  5. 《JavaScript 实战》：JavaScript 图片滑动切换效果
		
    看到alibaba的一个图片切换效果,感觉不错,想拿来用用.但代码一大堆的,看着昏,还是自己来吧.由于有了做图片滑动展示效果的经验,做这个就容易得多了. 效果预览 仿淘宝/alibaba图片切换: 默 ...
    
		
    6. 
						
  6. jQuery插件实例三：图片滚动[切换]效果一
		
    图片切换效果在很多网站上都能看到,是一种常见的广告/活动宣传方式,通常位于网页上端.这个插件是众多图片切换效果的形式中的一种,数据源可在前端配置,也可从后台通JSON格式传输数据,当然,数据格式是固定 ...
    
		
    7. 
						
  7. 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果
		
    利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼 ...
    
		
    8. 
						
  8. 实例源码--Android图片滚动切换效果
		
    下载源码 技术要点:  1.图片滚动切换技术 2.详细的源码注释 ...... 详细介绍: 1.图片滚动切换技术 本套源码实现了类似于网站图片滚动推广效果,效果不错,很不错的参考源码 2.源码目录 运 ...
    
		
    9. 
						
  9. 个人学习JQ插件编写成果：little酷炫的图片滑动切换效果
		
    工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/de ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. CCF模拟题 窗口
			
    窗口 时间限制: 1.0s 内存限制: 256.0MB   问题描述 在某图形操作系统中,有 N 个窗口,每个窗口都是一个两边与坐标轴分别平行的矩形区域.窗口的边界上的点也属于该窗口.窗口之间有层次的 ...
    
			
    2. 
						
  2. 自写的开发框架，胜于官方的clientAPP的实战开发。（已开源）
			
    已开源,欢迎大家fork 小弟github地址为https://github.com/10045125/vanda 好久没写博客了,这段时间主要是要做的事情太多.如今接触android有段时间了.非常 ...
    
			
    3. 
						
  3. 关于Java IO InputStream 的一点整理！
			
    程序的开发其中一直在用文件的读写.可是对于java其中输入流以及输出流仅仅是会用不理解,一直以来想搞清楚其,可是一直没有运行(悲剧).今天早上抽出半个小时通过JDK API1.6.0中文版帮助逐步的了 ...
    
			
    4. 
						
  4. nagios插件之登陆防火墙实现session监控
			
    ssh_firewall_session.sh -- 登陆防火墙并运行dis session statistics firewall_check_sessions.c -- 调用上面脚本.过滤出ses ...
    
			
    5. 
						
  5. RvmTranslator6.4 is released
			
    RvmTranslator6.4 is released eryar@163.com RvmTranslator can translate the RVM file exported by AVEV ...
    
			
    6. 
						
  6. 基于TI Davinci架构的多核/双核开发高速扫盲（以OMAP L138为例），dm8168多核开发參考以及达芬奇系列资料user guide整理
			
    基于TI Davinci架构的双核嵌入式应用处理器OMAPL138开发入门 原文转自http://blog.csdn.net/wangpengqi/article/details/8115614 感谢 ...
    
			
    7. 
						
  7. 解决wget下载文件名乱码的一些方法
			
    在下载用apache或者nginx做的索引目录时,遇到文件名乱码问题.搜索了不少资料,尝试了好几种方案,大家可以结合使用. 一般情况下加上–restrict-file-names=nocontrol参 ...
    
			
    8. 
						
  8. pip的认识
			
    一.pip与python的关系:pip并不是一种语言,而是一个Python包管理工具,主要是用于安装 PyPI 上的软件包.安装好pip之后,使用pip install 命令即可方便的安装python ...
    
			
    9. 
						
  9. AIX 适配器
			
    1. 查看所有适配卡 lsdev -CHc adapter     2. 物理网卡适配卡 查看到物理网卡的个数与类型 lsdev -Cc adapter|grep ent   查看物理网卡具体插槽位( ...
    
			
    10. 
						
  10. 华为畅玩5 (CUN-AL00) 刷入第三方twrp Recovery  及 root
			
    华为畅玩5 (CUN-AL00) 刷入第三方twrp Recovery  及 root 下载地址    http://pan.baidu.com/s/1hsn6VzA 1. 在官网申请解锁码    申 ...
    
			
    11.