<!DOCTYPE HTML>

 <html>

   <head>

     <meta charset="utf-8">

     <title>JS实现幻动片选项卡</title>

   </head>

   <style>

     .container{

   text-align:center;

   width:100%;

 }

 .ppt{

   display:none;

   padding:20px;

   margin:0px;

   color:white;

   text-align:center;

   height:200px;

 }

 .btn{/* 这部分可以改成小圆点、数字*/

     background-color: #555;

     color: white;

     float: left;

     border: none;

     outline: none;

     cursor: pointer;

     padding: 14px 16px;

     font-size: 17px;

     width: 25%;

 }

 .btn:hover {

     background-color: #777;

 }

   </style>

   <body>

     <div class="container">

      <div id="test1" class="ppt" style="background:red">

       <h1>

         幻动片1内容（这里可以先出任何你想要的代码）

       </h1>

     </div>

     <div  id="test2" class="ppt" style="background:black">

       <h1>

         幻动片2内容（这里可以先出任何你想要的代码）

       </h1>

     </div>

     <div id="test3" class="ppt" style="background:yellow">

       <h1>

         幻动片3内容（这里可以先出任何你想要的代码）

       </h1>

     </div>

     <div id="test4" class="ppt" style="background:green">

       <h1>

         幻动片4内容（这里可以先出任何你想要的代码）

       </h1>

     </div>

     <!--切换按钮-->

     <button type="button" class="btn"  id="defaultppt" onclick="openppt('test1',this,'red')">幻动片1</button>

     <button type="button" class="btn"  onclick="openppt('test2',this,'black')">幻动片2</button>

     <button type="button" class="btn" onclick="openppt('test3',this,'yellow')">幻动片3</button>

     <button type="button" class="btn"onclick="openppt('test4',this,'green')">幻动片4</button>

    </div>

    <script>

      function openppt(pptname,elmnt,color) {

     var i, ppt, btn;

     //获得PPT并全隐藏

    ppt = document.getElementsByClassName("ppt");

   for(var i=0;i<ppt.length;i++){

     ppt[i].style.display="none";

   }

     //获取切换按钮并且赋值颜色与PPT一样

   btn=document.getElementsByClassName("btn");

   for(var j=0;j<btn.length;j++){

     btn[j].style.background="";

   }

     document.getElementById(pptname).style.display = "block";

     elmnt.style.backgroundColor = color;

 }

 // 触发 id="defaultppt" click 事件,第一张要显示出来

 document.getElementById("defaultppt").click();

    </script>

   </body>

 </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. C++中冒号(:)的作用

    摘于:http://blog.csdn.net/zimingjushi/article/details/6549390 (1)表示机构内位域的定义(即该变量占几个bit空间) typedef stru ...

  2. oracle之dbms_output

    oracle的dbms_output oracle的dbms_output的两个小问题 .如果dbms_output.put_line的内容不能显示,需要在命令行中先敲入set serveroutpu ...

  3. Java的位运算符——&0xFF的运算与讲解

    快放元旦假,没心思做啥的事,就去翻以前的代码遇到这句,但是又不懂,所以只好上网找,终于懂了那么一点点. 所以那个大神看到我说的有问题,请指出!谢谢.... 一:首先区分一下 A~F的意思先 A,代表十 ...

  4. CentOS 7上安装gitlab-runner

    1.yum install gitlab-runner -y 2.Registering Runners a.Run the following command: gitlab-runner regi ...

  5. 【 Codeforces Round #425 (Div. 2) D】Misha, Grisha and Underground

    [Link]:http://codeforces.com/contest/832/problem/D [Description] 给你一棵树; 然后给你3个点 让你把这3个点和点s,t,f对应; 然后 ...

  6. DataGirdView 常用操作

    1.将数据源的某列添加到已有DataGirdView的列 例如:将文件夹下所有文件名添加到DataGirdView 的文件名一列,图片如下: 首先在datagridview把文件名列的DATAPROP ...

  7. vector要注意的点

    vector的元素类别T,必须具备assignable和copyable两个性质. vector的容量很重要: 1. 一旦内存重新配置,和vector元素相关的所有references.pointer ...

  8. 集群通信组件tribes之用法

    上面已经对tribes的内部实现机制及原理进行了深入的剖析.在理解它的设计原理后看看怎样使用tribes.整个使用相当简单便捷,仅仅须要四步: ① 定义一个消息对象,因为这个消息对象是要在网络之间传递 ...

  9. JQ 实施编辑 （clone()复制行||双击编辑）

    //代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  10. px、em、rem、vw、vh、vm、rpx这些单位的

    px是像素 em是参考父元素的font-size的倍数 rem是参考根元素的font-size 常用于响应式,一般会让html的font-size:625%,body的大小为.16rem.这样1rem ...