<!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. SQLServer 查询最近一天，三天，一周，一月，一季度数据的方法

    三天 select * from T_news where datediff(day,addtime,getdate())<= 2 and datediff(day,addtime,getdat ...

  2. ttf字体转换成web中使用的woff、svg、eot格式字体

    网站地址:http://www.fontsquirrel.com/tools/webfont-generator(还可以缩小字体文件大小,强烈推荐) ttf转换成eot格式的字体软件:EOTFAST. ...

  3. Ubuntu中的解压缩文件的方式

    记录Ubuntu下各种压缩和解压方式: .tar 解包:tar xvf FileName.tar 打包:tar cvf FileName.tar DirName (注:tar是打包,不是压缩!) -- ...

  4. cocos2d-x的声音控制

    声音控制SimpleAudioEngine是单例.下面是其方法. [cpp] view plaincopy //获得SimpleAudioEngine的实例 static SimpleAudioEng ...

  5. javafx style and cssFile

    public class EffectTest extends Application { public static void main(String[] args) { launch(args); ...

  6. c# Dictionary

    Dictionary<string,string>是一个泛型  有集合的功能,也可以看成一个数组:结构是这样的Dictionary<[key],[value]> 存入的对象是需 ...

  7. storm1.1运行时问题

    java.lang.NoClassDefFoundError: org/apache/curator/shaded/com/google/common/cache/CacheBuilder 程序并没有 ...

  8. 使用Java开发微信公众平台（四）——消息的接收与响应

    上一篇文章(http://www.jerehedu.com/fenxiang/171807_for_detail.htm )中,我们学习了使用Java语言开发微信公众平台的第一部分——环境搭建与开发接 ...

  9. spring mvc 接收ajax 复杂结构数据

    1. 前段将要发送的信息转换成json字符串 2. spring mvc 使用 @RequestBody 来接收字符串,然后解析

  10. ArcGIS Api For Flex 动态画点和线

    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...