<!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. 最长回文子串 hihocode 1032 hdu 3068

    最长回文 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  2. CodeChef November Challenge 2013 部分题解

    http://www.codechef.com/NOV13 还在比...我先放一部分题解吧... Uncle Johny 排序一遍 struct node{ int val; int pos; }a[ ...

  3. iOS Scheme 跳转主流实现方案

    iOS Scheme跳转主流实现方案主要是路由跳转,目前iOS常用路由框架是JLRouter.HHRouter.MGJRouter. 但是这些路由库都各有不足,首先是JLRouter,用不到的功能繁多 ...

  4. <c:if test=""></c:if> 使用

    1.页面引用<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 2.整形判 ...

  5. Mysql学习总结（5）——MySql常用函数大全讲解

    MySQL数据库中提供了很丰富的函数.MySQL函数包括数学函数.字符串函数.日期和时间函数.条件判断函数.系统信息函数.加密函数.格式化函数等.通过这些函数,可以简化用户的操作.例如,字符串连接函数 ...

  6. 转：IOS的推送。是一个强大的功能

    IOS下我们很多人天天开着 邮件推送 微信推送 QQ推送 微博推送 新浪微博推送,安卓敢吗? 五个后台进程消耗电.流量谁敢这么做?现在安卓也出了推送,但绝对是伪推送.实际是挂了个进程,关掉了就收不到. ...

  7. 创建maven项目pom.xml出现错误（依赖Missing）

    Maven的依赖问题 在聚合模块时候,发现在父工程目录中的依赖存在一些问题.一开始是${pagehelper.version},后来将版本直接填写相应的版本如图下 依赖添加失败 * 在父工程的jar包 ...

  8. DOM节点的创建、插入、删除、查找、替换

    在前端开发中,js与html联系最紧密的莫过于对DOM的操作了,本文为大家分享一些DOM节点的基本操作. 一.创建DOM节点 使用的命令是 var oDiv = document.createElem ...

  9. 搜寻Linux软件实用指南

    搜寻Linux软件实用指南  对于初学者来说,仅仅安装好Linux系统还是不够的,还需要安装大量的应用软件.许多下载网站都提供了诸如装机必备软件的下载,分门别类提供经典的工具软件下载.本文主要针对初学 ...

  10. Statement和ResultSet

    statement.prepareStatement.callableStatement的使用 1.带?参数的使用prepareStatement.这也是使用最多的. 2.不带参数,例如查所用,不需要 ...