<!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. vue-router学习例子分享

    http://blog.csdn.net/bboyjoe/article/details/52804988 <!DOCTYPE html> <html lang="en&q ...

  2. Codefroces 852 G. Bathroom terminal

    G. Bathroom terminal Smith wakes up at the side of a dirty, disused bathroom, his ankle chained to p ...

  3. CodeBlocks 配色方案

    搜索<colour_sets>,在</ACTIVE_LANG>下加入: 有几种经典方案,包括vim,desert,sublime,ulipad,oblivion,darkgra ...

  4. js sort()函数 排序问题 var arr =['A-1-5-1','A-1-10-2','A-1-5-5','B-2-3-1','C-4-10-1'], 对这个数组进行排序，想达到的效果是["A-1-5-1", "A-1-5-5", "A-4-10-1", "A-1-10-2", "A-2-3-1"]

    先介绍个方法 charCodeAt() 方法可返回指定位置的字符的 Unicode 编码.这个返回值是 0 - 65535 之间的整数. stringObject.charCodeAt(index) ...

  5. js中split,splice,slice方法之间的差异。

    首先我们先来林格斯双击翻译一下: split  劈开, 使分裂: splice   接合; 使结合: slice  切成薄片, 切: 我先是这么区分的:这三个方法最后一个字母是t的是字符串方法,是e的 ...

  6. 学习《零基础入门学习Python》电子书PDF+笔记+课后题及答案

    初学python入门建议学习<零基础入门学习Python>.适合新手入门,很简单很易懂.前一半将语法,后一半讲了实际的应用. Python3入门必备,小甲鱼手把手教授Python,包含电子 ...

  7. 本地用户 vsftpd 配置文件

    # 禁止匿名用户anonymous登录 anonymous_enable=NO # 允许本地用户登录 local_enable=YES local_root=/data/wwwroot/ # 让登录的 ...

  8. Python的主要库

    本文在Creative Commons许可证下发布 市面上的分析工具大致分为两大类,菜单式的工具和命令行式的工具.前者适合于初学入门,类似于跟团旅游,提供了固定的路线.分析套路比较固定化,点几下鼠标就 ...

  9. CodeForcesGym 100502D Dice Game

    Dice Game Time Limit: 1000ms Memory Limit: 524288KB This problem will be judged on CodeForcesGym. Or ...

  10. 利用命令行删除Android系统自带应用的方法

    声明:本博客为原创博客.未经同意,不得转载!小伙伴们假设是在别的地方看到的话,建议还是来csdn上看吧(链接为http://blog.csdn.net/bettarwang/article/detai ...