1.  <!DOCTYPE HTML>
  2.  <html>
  3.    <head>
  4.      <meta charset="utf-8">
  5.      <title>JS实现幻动片选项卡</title>
  6.    </head>
  7.    <style>
  8.      .container{
  9.    text-align:center;
  10.    width:100%;
  11.  }
  12.  
  13.  .ppt{
  14.    display:none;
  15.    padding:20px;
  16.    margin:0px;
  17.    color:white;
  18.    text-align:center;
  19.    height:200px;
  20.  }
  21.  .btn{/* 这部分可以改成小圆点、数字*/
  22.      background-color: #555;
  23.      color: white;
  24.      float: left;
  25.      border: none;
  26.      outline: none;
  27.      cursor: pointer;
  28.      padding: 14px 16px;
  29.      font-size: 17px;
  30.      width: 25%;
  31.  
  32.  }
  33.  .btn:hover {
  34.      background-color: #777;
  35.  }
  36.  
  37.    </style>
  38.    <body>
  39.      <div class="container">
  40.  
  41.       <div id="test1" class="ppt" style="background:red">
  42.        <h1>
  43.          幻动片1内容（这里可以先出任何你想要的代码）
  44.        </h1>
  45.      </div>
  46.      <div  id="test2" class="ppt" style="background:black">
  47.        <h1>
  48.          幻动片2内容（这里可以先出任何你想要的代码）
  49.        </h1>
  50.      </div>
  51.      <div id="test3" class="ppt" style="background:yellow">
  52.        <h1>
  53.          幻动片3内容（这里可以先出任何你想要的代码）
  54.        </h1>
  55.      </div>
  56.      <div id="test4" class="ppt" style="background:green">
  57.        <h1>
  58.          幻动片4内容（这里可以先出任何你想要的代码）
  59.        </h1>
  60.      </div>
  61.      <!--切换按钮-->
  62.      <button type="button" class="btn"  id="defaultppt" onclick="openppt('test1',this,'red')">幻动片1</button>
  63.      <button type="button" class="btn"  onclick="openppt('test2',this,'black')">幻动片2</button>
  64.      <button type="button" class="btn" onclick="openppt('test3',this,'yellow')">幻动片3</button>
  65.      <button type="button" class="btn"onclick="openppt('test4',this,'green')">幻动片4</button>
  66.     </div>
  67.     <script>
  68.       function openppt(pptname,elmnt,color) {
  69.      var i, ppt, btn;
  70.      //获得PPT并全隐藏
  71.     ppt = document.getElementsByClassName("ppt");
  72.    for(var i=0;i<ppt.length;i++){
  73.      ppt[i].style.display="none";
  74.    }
  75.      //获取切换按钮并且赋值颜色与PPT一样
  76.    btn=document.getElementsByClassName("btn");
  77.    for(var j=0;j<btn.length;j++){
  78.      btn[j].style.background="";
  79.    }
  80.      document.getElementById(pptname).style.display = "block";
  81.      elmnt.style.backgroundColor = color;
  82.  
  83.  }
  84.  // 触发 id="defaultppt" click 事件,第一张要显示出来
  85.  document.getElementById("defaultppt").click();
  86.     </script>
  87.    </body>
  88.  </html>

JS原生选项卡 – 幻灯片效果的更多相关文章

  1. 手把手教你js原生瀑布流效果实现

    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...

  2. 用html+css+js实现选项卡切换效果

    文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...

  3. js原生选项卡（包含无缝滚动轮播图）一

    原生js选项卡的几种写法,整片文章我会由简及难的描述几种常用的原生选项卡的写法: Improve little by little every day! 1>基本选项卡: 思路:循环中先清除再添 ...

  4. 用js实现选项卡切换效果

    这是要实现的效果图: 一.HTML页面布局 <!-- HTML页面布局 --><ul class="tab_menu"> <li class=&quo ...

  5. JS实现选项卡切换效果

    1.在网页制作过程中,我们经常会用到选项卡切换效果,它能够让我们的网页在交互和布局上都能得到提升 原理:在布局好选项卡的HTML结构后,我们可以看的出来,选项卡实际上是三个选项卡标头和三个对应的版块, ...

  6. js原生选项卡（包含移动端无缝选项卡）三

    今天分享下移动端原生js的无缝轮播图: 移动端尽量减少使用DOM操作来频繁的浪费移动端设备的性能,所以这个无缝轮播图更多的使用了transition和transform,无缝的思想和昨天分享的PC端的 ...

  7. js原生选项卡（自动播放无缝滚动轮播图）二

    今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走 ...

  8. js实现图片幻灯片效果

    其效果是点击图片切换到下一张图片 首先准备五张图片 <ul class="imge"> <li><img src="images/1.jpg ...

  9. JS原生回到顶部效果

    // 回到顶部 onload = function () { var oBtnTop = document.getElementById('toTop'); var timer = null; oBt ...

随机推荐

  1. Asp.Net碎知识

    在aspx页面 获取值: UserModel user=new UserModel();实例化 user.Address=context["txtAddress"]; 如果前台不需 ...

  2. UESTC 1599 wtmsb

    这天,AutSky_JadeK看到了n张图片,他忍不住说道:“我TM社保!”. 每张图片有一个社保值,他可以合并两张图片,合并所得的图片的社保值是原来两张图片的社保值之和. 每次合并需要消耗的体力也是 ...

  3. docker升级&加速器配置

    默认使用yum或者apt安装的docker版本较老,可以通过以下方式进行升级: 1.卸载旧版本 [root@CentOS702 ~]# centos 7.3卸载docker[root@CentOS70 ...

  4. js中运算符优先级问题

    其实事情是这样的,最近看到不少朋友讨论一道据说不知道哪儿的笔试题目,题目如下: var a = {n:1}; var b = a; a.x = a = {n:2}; 请写出a.x的值. 当然通过运行, ...

  5. MySQL Field排序法

    检索 id = 2 or id = 5 or id = 9 or id = 56 or id = 38.然后按照 2 , 5, 9, 56, 38 这个顺序排列,这是题目要求   以下为解决方案: 1 ...

  6. Swift学习笔记(10)--枚举

    1.定义语法: enum SomeEnumeration { // enumeration definition goes here } 2.使用 enum CompassPoint { case N ...

  7. 【Uva 10817】Headmaster's Headache

    [Link]: [Description] 一个学校,有s门课程(1<=s <=8),里面本身已经有m个老师了,然后还想招聘n个老师: 给出这m个老师和n个来应聘的老师的信息; (c[i] ...

  8. 实际运用中DataSet、DataTable、DataRow点滴

    DataSet.DataTable都自带有序列化标记,但是DataRow没有, 所以如果是在CS程序中,Release版本程序DataTable才是最小的数据传输单元,如果使用DataRow则会报[未 ...

  9. Linux中为XEN网桥绑定物理网卡

    XEN虚拟机会默认将可以连通外网的网卡绑定到xenbr0上, 因此如果需要切换到其他物理网卡上时,需要自己配置脚本或执行命令. 1.添加脚本绑定 a.编写一个脚本,指定网卡与网桥绑定的关系 # vim ...

  10. Cocos2d-x游戏的一般验证分析

    Coco2d-x引擎是相对于Unity3D的又一实力派引擎.尽管随着3D游戏的热门,很多其它的厂商偏向于Unity3D.可是Coco2d-x的普及量也不容小觑,特别是一些比較大的手游公司.比方触控科技 ...