JS原生选项卡 – 幻灯片效果
生活随笔
收集整理的這篇文章主要介紹了
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原生选项卡 – 幻灯片效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 贴钢化手机膜要多少钱？
- 下一篇： Docker最全教程——从理论到实战（六