JS原生选项卡 – 幻灯片效果

 1 <!DOCTYPE HTML>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <title>JS实现幻动片选项卡</title>
 6   </head>
 7   <style>
 8     .container{
 9   text-align:center;
10   width:100%;
11 }
12
13 .ppt{
14   display:none;
15   padding:20px;
16   margin:0px;
17   color:white;
18   text-align:center;
19   height:200px;
20 }
21 .btn{/* 这部分可以改成小圆点、数字*/
22     background-color: #555;
23     color: white;
24     float: left;
25     border: none;
26     outline: none;
27     cursor: pointer;
28     padding: 14px 16px;
29     font-size: 17px;
30     width: 25%;
31
32 }
33 .btn:hover {
34     background-color: #777;
35 }
36
37   </style>
38   <body>
39     <div class="container">
40
41
42      <div id="test1" class="ppt" style="background:red">
43       <h1>
44         幻动片1内容（这里可以先出任何你想要的代码）
45       </h1>
46     </div>
47     <div  id="test2" class="ppt" style="background:black">
48       <h1>
49         幻动片2内容（这里可以先出任何你想要的代码）
50       </h1>
51     </div>
52     <div id="test3" class="ppt" style="background:yellow">
53       <h1>
54         幻动片3内容（这里可以先出任何你想要的代码）
55       </h1>
56     </div>
57     <div id="test4" class="ppt" style="background:green">
58       <h1>
59         幻动片4内容（这里可以先出任何你想要的代码）
60       </h1>
61     </div>
62     <!--切换按钮-->
63     <button type="button" class="btn"  id="defaultppt" οnclick="openppt('test1',this,'red')">幻动片1</button>
64     <button type="button" class="btn"  οnclick="openppt('test2',this,'black')">幻动片2</button>
65     <button type="button" class="btn" οnclick="openppt('test3',this,'yellow')">幻动片3</button>
66     <button type="button" class="btn"οnclick="openppt('test4',this,'green')">幻动片4</button>
67    </div>
68    <script>
69      function openppt(pptname,elmnt,color) {
70     var i, ppt, btn;
71     //获得PPT并全隐藏
72    ppt = document.getElementsByClassName("ppt");
73   for(var i=0;i<ppt.length;i++){
74     ppt[i].style.display="none";
75   }
76     //获取切换按钮并且赋值颜色与PPT一样
77   btn=document.getElementsByClassName("btn");
78   for(var j=0;j<btn.length;j++){
79     btn[j].style.background="";
80   }
81     document.getElementById(pptname).style.display = "block";
82     elmnt.style.backgroundColor = color;
83
84 }
85 // 触发 id="defaultppt" click 事件,第一张要显示出来
86 document.getElementById("defaultppt").click();
87    </script>
88   </body>
89 </html>

转载于:https://www.cnblogs.com/weblife/p/10265604.html

JS原生选项卡 – 幻灯片效果相关推荐

JS实现图片幻灯片效果
代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> &l ...
js原生选项卡（自动播放无缝滚动轮播图）二
今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走 ...
JS原生---歌词滚动效果案例
[开门见山] 实现目标: 需要让歌词列表随着播放的时间更新而滚动,即实时的跟随歌曲的进度而滚动效果: 需要事先准备的东西: 1.音频(mp3格式): 2.歌词(详细): 先展示html和css的实现 ...
js图片切换幻灯片效果
特效 <div align="center"> <script language='javascript' type='text/javascript'> ...
JS 实现图片幻灯片效果。兼容 FF IE
<script type="text/javascript"> var focus_width=950; var focus_height=250; var ...
【加强版】js原生实现拖拽效果，这次没有用document的mousedown、mousemove、mouseup事件我们来点实际的（但是有个弊端：拖拽过程中鼠标会变成一个禁用符号，不太友好）
<div class='dragged'></div> //初始化需要拖拽的列initDrags() {var arr = document.querySelectorAll( ...
【墙裂推荐】【原生基础版】js原生实现拖拽效果，注意不要忘了div的cursor用grab和grabbing 还是古法炮制、传统工艺的原生代码兼容性最好，推荐
以下方式的劣势就是在放弃拖拽那一刻会触发click事件,通常如果被拖拽元素还有其他点击事件,会重复触发,往往并非业务需求.优势就是-额-貌似这段代码没什么屌优势! <div class='dra ...
html5 原生拖拽,原生JS实现拖拽效果
这篇文章主要为大家详细介绍了原生JS实现拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 ...
html多图轮播淡入淡出js,原生JS实现图片轮播与淡入效果的简单实例
最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在 ...

JS原生选项卡 – 幻灯片效果

JS原生选项卡 – 幻灯片效果相关推荐

最新文章

热门文章