LeetCode 649. Dota2 參議院(迴圈佇列)
阿新 • • 發佈:2020-12-12
html:
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/css/index.css"> <title>Document</title> </head> <body> <div class="banner"> <span class="previouspage"> < </span> <span class="nextpage"> > </span> <div class="child1"><img src="/images/123.png" alt=""></div> <div class="child2"><img src="/images/2020-12-05-15-42-13_0.png" alt=""></div> <div class="child3"><img src="/images/sd.png" alt=""></div> </div> <script src="/js/jquery-3.5.1.min.js"></script> <script src="/js/index.js"></script> </body>
css:
*{ margin: 0; padding: 0; transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; } body{ overflow: hidden; } .banner{ height: 400px; background-color: #666666; position: relative; } .child1{ position: absolute; display: block; width: 600px; height: 300px; opacity: 1; top: 50px; /* 居中 */ left: calc(50% - 300px); z-index: 999; } .child1 img{ width: 100%; height: 100%; } .child2 img{ width: 100%; height: 100%; } .child3 img{ width: 100%; height: 100%; } .child2{ position: absolute; display: block; opacity:0.5; width: 400px; height: 200px; top: 100px; left: 200px; } .child3{ position: absolute; display: block; opacity:0.5; width: 400px; height: 200px; top: 100px; left: calc(100% - 600px); } .banner span { position: absolute; color: white; background: rgba(125,125,120,.3); width: 50px; height: 80px; top: 50%; font-family: "宋體"; line-height: 80px; font-size: 60px; margin-top: -40px; text-align: center; cursor: pointer; } .banner span:hover{ background: rgba(125,125,120,.8); } .banner .previouspage{ left: 50px; } .banner .nextpage{ right: 50px; }
js:
$(function(){ // 圖片在不同區域顯示不同效果 function Banner(s1,s2,s3) { // 左邊圖 $(s1).css({"opacity":"0.5","width":"400px","height":"200px","top":"100px","left":"200px","z-index":"1"}); // 右邊圖 $(s2).css({"opacity":"0.5","width":"400px","height":"200px","top":"100px","left":"calc(100% - 600px)","z-index":"1"}); // 中間圖 $(s3).css({"opacity":"1","width":"600px","height":"300px","top":"50px","left":"calc(50% - 300px)","z-index":"999"}); } var i=3; var str=".banner .child"; $(".banner .previouspage").click(function(){ switch(i){ case 1: Banner(str+(i+2),str+i,str+(i+1)); break; case 2: Banner(str+i,str+(i+1),str+(i-1)); break; case 3: Banner(str+(i-2),str+(i-1),str+i); break; default: break; } i++; if(i>3){ i=1; } }); })
效果: