自簽名證書Linux的匯入
阿新 • • 發佈：2022-04-10
html部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="http://at.alicdn.com/t/font_3311044_a5m1cszjye8.css"> <!--阿里向量庫下載的圖片連結--> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="index.css"> </head> <body> <div class="banner"> <ul class="pic"> <li><a href="javascript:void(0)"><img src="image/1.jpg" alt="圖片"></a></li> <!-- 寫死--> <li><a href="javascript:void(0)"><img src="image/2.jpg" alt="圖片"></a></li> <li><a href="javascript:void(0)"><img src="image/3.jpg" alt="圖片"></a></li> <li><a href="javascript:void(0)"><img src="image/4.jpg" alt="圖片"></a></li> </ul> <ul class="tab"> <li></li> <li></li> <li></li> <li></li> </ul> <ul class="btn"> <li class="left"><i class="iconfont icon-zuojiantou"></i></li> <!--阿里向量圖示庫--> <li class="right"><i class="iconfont icon-youjiantou"></i></li> </ul> </div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <script src="index.js"></script> </body> </html>
css部分
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /*清除浮動*/ .clearfix:after{ content: ""; display: block; clear: both; } a{ text-decoration: none; /*去除下滑線*/ /*字型顏色繼承父級*/ color:inherit; }
.banner{ width: 1200px; height: 600px; /*border: 1px solid red;*/ position: relative; } .banner .pic li{ position: absolute; left: 0; top: 0; } .banner .pic img{ width: 1200px; height: 600px; } .banner .tab{ position: absolute; bottom: 10px; left: 50%; width: 128px; margin-left:-64px; height: 50px; } .banner .tab li{ border: 1px solid red; width: 20px; height: 20px; float: left; border-radius: 50%; } .banner .tab li.on{ background: burlywood; } .banner .btn li i{ position: absolute; font-size: 100px; top: 50%; margin-top: -50px; color: white; display: none; } .banner:hover .btn li i{ display: block; } .banner .btn li.left i{ left: 0; } .banner .btn li.right i{ right: 0; }
js部分
//獲取圖片 var pic = $(".banner .pic li"); //獲取小圓點 var tab = $(".banner .tab li"); //獲取箭頭 var btn = $(".banner .btn li"); // 長度 var len = pic.length; var first = 0; // 定時器 var timer; //初始化 tab.eq(0).addClass('on');//一開啟頁面的時候顯示哪張 pic.hide().eq(0).show(); //先全部隱藏，然後再顯示第一個 // 圓點的方法 tab.click(function () { var x = $(this).index(); if(x!=first){ change(x) } }); // 箭頭的方法 btn.click(function () { var x = first; if ($(this).index()){ //index獲取下標 x++; //左箭頭 if(x>=len) x=0;//到最後一張的時候再變為零 }else { x--; //右箭頭 if(x<0) x=len-1 } change(x) }); // 定時器自動播放 auto(); function auto() { timer = setInterval(function(){ var x =first; x ++; x %= len //0%4 1&4 2%4 3%4 change(x) },3000); } // 清除定時器 $('.banner').hover(function (){ clearInterval(timer) },auto) //變化函式 function change(n) { // 老的就去掉樣式 然後隱藏 tab.eq(first).removeClass('on'); pic.eq(first).fadeOut(3000); first = n; // 新的就新增樣式 然後顯示 tab.eq(first).addClass('on'); pic.eq(first).fadeIn(3000); }