先附图：

CSS样式部分：

  1. <style>
  2.     *{margin:; padding:}
  3.     body{font-family:'Microsoft YaHei';}
  4.     .menu{margin:20px auto 0; width:550px; text-align: center;}
  5.     .menu h4{font-weight:normal; line-height:50px;}
  6.     #xh{margin: auto 30px;}
  7.     #sx{margin: auto 30px;}
  8.     #tab{width:550px; height:380px;border:10px solid darkgray; position:relative; margin:0 auto;}
  9.     #tab a{width:40px; height:40px; background: black; color:white; position:absolute; top:160px; font-size: 28px;text-align:center;opacity:0.6; filter:alpha(opacity=60);}
  10.     #tab a:hover{opacity:0.8; filter:alpha(opacity=80);}
  11.     #spanID{width:550px;height:20px; line-height:20px;background:black; color: white; position:absolute; text-align:center; opacity:0.8; filter:alpha(opacity=80);}
  12.     #prev{left:10px; cursor:pointer;}
  13.     #next{right:10px; cursor:pointer;}
  14.     #pId{width:550px;height:30px; line-height:30px; background:black; text-align:center;position:absolute; bottom:0px; color:white;opacity:0.8; filter:alpha(opacity=80);}
  15.     #imgID{width:550px; height:380px;}
  16. </style>

JS代码部分：

  1. <script>
  2.     var oXh = $('xh');
  3.     var oSx = $('sx');
  4.     var oText = $('text');
  5.     var oSpanId = $('spanID');
  6.     var oPrev = $('prev');
  7.     var oNext = $('next');
  8.     var oImgID = $('imgID');
  9.     var OPId = $('pId');
  10.     var arr = ['images/tab/1.jpg','images/tab/2.jpg','images/tab/3.jpg','images/tab/4.jpg'];
  11.     var arrPid = ['这是第一张','这是第二张','这是第三张','这是第四张'];
  12.     var num = 0;
  13.     var onOff = true;
  14.     //循环切换事件
  15.     oXh.onclick = function () {
  16.         onOff = true;
  17.         oText.innerHTML = '图片循环切换';
  18.         oText.style.color = 'red';
  19.     }
    　　//顺序切换事件
  20.     oSx.onclick = function () {
  21.         onOff = false;
  22.         oText.innerHTML = '图片顺序切换';
  23.         oText.style.color = 'blue';
  24.     }
  25.     //默认显示第一张图片
  26.     function funTab(){
  27.         oImgID.src = arr[num];
  28.         OPId.innerHTML = arrPid[num];
  29.         oSpanId.innerHTML = (num+1) +'/'+ (arr.length);
  30.     }
  31.     funTab();
  32.     //下一张
  33.     oNext.onclick = function(){
  34.         num++;
  35.         if(num == arr.length){
  36.             if(onOff == true){
  37.                 num = 0;
  38.             } else {
  39.                 num = arr.length-1;
  40.                 alert('已经到了最后一张了，~ ~!');
  41.             }
  42.         }
  43.         funTab();
  44.     }
  45.     //上一张
  46.     oPrev.onclick = function(){
  47.         num--;
  48.         if(num == -1){
  49.             if(onOff == false){
  50.                 num = 0;
  51.                 alert('这已经是第一张了，~ ~!');
  52.             } else{
  53.                 num = arr.length-1;
  54.             }
  55.         }
  56.         funTab();
  57.     }
  58.     //ID调用通用函数
  59.     function $(id){
  60.         return document.getElementById(id);
  61.     }
  62. </script>

html部分：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="utf-8">
  5.     <title>轮播切换</title>
  6. </head>
  7. <body>
  8.     <div class="menu">
  9.         <input id="xh" type="button" value="循环播放">
  10.         <input id="sx"  type="button" value="顺序播放">
  11.         <h4 id="text">请选择切换模式</h4>
  12.     </div>
  13.     <div id="tab">
  14.         <span id="spanID">加载中......</span>
  15.         <a id="prev" herf="javascript:;"><</a>
  16.         <a id="next" herf="javascript:;">></a>
  17.         <img id="imgID" src="图片加载中.....">
  18.         <p id="pId">加载中......</p>
  19.     </div>
  20. </body>
  21. </html>

JS案例练习：图片切换+切换模式的更多相关文章

  1. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  2. [js开源组件开发]js轮播图片支持手机滑动切换

    js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...

  3. CSS3图片翻转切换案例及其中重要属性解析

    图片翻转切换,在不使用CSS3的情况下,一般都是使用JS实现动画,同时操作元素的width和left,或者height和top以模拟翻转的效果,并在适当时候改变src或者z-index实现图片切换. ...

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

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

  5. 原生JS—实现图片循环切换的两种方法

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...

  6. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

  7. js自增图片切换

    使用js自增进行图片的切换 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=& ...

  8. 原生JS实现图片循环切换

    <!-- <!DOCTYPE html> <html> <head> <title>原生JS实现图片循环切换 —— 方法一</title&g ...

  9. 利用JS实现点击按钮后图片自动切换

    我么常常看到一个网站的主界面的图片可以切换自如,那么又是如何实现的呢? 1.HTML页面布局如图所示: Main(div) top(div)(显示需要显示的图片) bottom UL (li)< ...

随机推荐

  1. CodeForces 492E Vanya and Field （思维题）

    E. Vanya and Field time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  2. 未能写入输出文件 “c:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\root\6ee8fd15\5fc973dd\App_Web_default.aspx.cdcab7d2.e1voeq0d.dll”--“拒绝访问

    在本地开发环境没问题,但是发布到服务器出现:未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Fil ...

  3. 对于多线程程序，单核cpu与多核cpu是怎么工作的

    此文中的大部分资料来自于网络上,我只是觉得把有道理的整理一下,方便以后查阅. 1.多线程在单核和多核CPU上的执行效率问题的讨论a1: 多线程在单cpu中其实也是顺序执行的,不过系统可以帮你切换那个执 ...

  4. 用python实现杨辉三角

    def yanghui(lines): currentlst,lastlst,n=[],[],1 if lines<1: return while n<=lines: lastlst=cu ...

  5. c++第五次实验

    part 1 两个问题: 1.派生类中出现与基类同名成员,通过对象名.成员名的方式,即代码中base2.display(),访问的成员是派生类中的成员 2.通过基类指针访问派生类对象时,在ex1_1. ...

  6. uoj #5. 【NOI2014】动物园

    #5. [NOI2014]动物园 近日,园长发现动物园中好吃懒做的动物越来越多了.例如企鹅,只会卖萌向游客要吃的.为了整治动物园的不良风气,让动物们凭自己的真才实学向游客要吃的园长决定开设算法班,让 ...

  7. MCP|DYM|Quantitative mass spectrometry to interrogate proteomic heterogeneity in metastatic lung adenocarcinoma and validate a novel somatic mutation CDK12-G879V (利用定量质谱探究转移性肺腺瘤的蛋白质组异质性及验证新体细胞突变)

    文献名:Quantitative mass spectrometry to interrogate proteomic heterogeneity in metastatic lung adenoca ...

  8. 今天来记录一下关于ajax跨域的一些问题。以备不时之需。

    今天来记录一下关于ajax跨域的一些问题.以备不时之需. 跨域 同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 URL 的域必须与当前 Web 页面 ...

  9. click点击事件先后顺序的问题

    //页面加载时,每秒钟调用一次var times = setInterval("loadFlws()","1000"); function loadFlws() ...

  10. jsp页面将日期类型的数据转换成xxxx年xx月xx日xx时xx分

    <fmt:formatDate value="${bsjz.cxkssj}" pattern="yyyy"/><span class=&quo ...