<!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. 目前常见的三种SQL分页方式：

    --top not in方式 select top 条数 * from tablename where Id not in (select top 条数*页数 Id from tablename) - ...

  2. Linux常用系统管理软件

    1.BleachBit是一款开源的系统清理工具,它可以释放磁盘空间,保护您的隐私,清除缓存,删除cookies.internet历史.临时文件.日志和丢弃的垃圾文件等,支持清除应用的残留数据,切碎文件 ...

  3. LG Gram 2018 z980 白

    因为今年8代处理器i5的双核变成了四核,感觉是个换电脑的好时机,本来打算买macbook,但是6月的发布会并没有发布,于是开始寻找一些比较有特点的笔记本电脑. 了解了这样一款笔记本 LG GRAM 1 ...

  4. Python, Django 性能分析工具的使用

    最近接手的 Apache HUE 项目性能出现了问题,线上经常出现响应时间过长或因为时间过长而无法服务等问题.老大让我准备弄个性能分析工具,便于追踪和分析平台当前的瓶颈出现在哪里. 那就搞起吧!先从代 ...

  5. 洛谷——P1043 数字游戏

    https://www.luogu.org/problem/show?pid=1043 题目描述 丁丁最近沉迷于一个数字游戏之中.这个游戏看似简单,但丁丁在研究了许多天之后却发觉原来在简单的规则下想要 ...

  6. vim 基础学习之普通模式

    .操作 = 操作符 + 动作 aaa bbb例如,d是删除命令,b是移动到距离光标最近的字符串开头当我们执行db的时候,就会删除光标(不包括光标位置)到最近字串开头之间的字符dj则会删除光标所在行以及 ...

  7. Docs-->.NET-->API reference-->System.​Web.​UI.​Web​Controls-->Repeater

    https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.repeater?view=netframework-4.7 ...

  8. spring cloud config配置中心源码分析之注解@EnableConfigServer

    spring cloud config的主函数是ConfigServerApplication,其定义如下: @Configuration @EnableAutoConfiguration @Enab ...

  9. EF中执行Sql语句

    Entity Framework是微软出品的高级ORM框架,大多数.NET开发者对这个ORM框架应该不会陌生.本文主要罗列在.NET(ASP.NET/WINFORM)应用程序开发中使用Entity F ...

  10. C#开发 —— 异常处理

    System.ArithmeticException 在算术运行期间发生异常 System.ArrayTypeMismatchException 存储元素的实际类型与数组的实际类型不兼容而导致存储失败 ...