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" onclick="openppt('test1',this,'red')">幻动片1</button>
64     <button type="button" class="btn"  onclick="openppt('test2',this,'black')">幻动片2</button>
65     <button type="button" class="btn" onclick="openppt('test3',this,'yellow')">幻动片3</button>
66     <button type="button" class="btn"onclick="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>

 

posted @ 2019-01-14 10:39  给自己一个梦  阅读(324)  评论(0)    收藏  举报