如果你经常浏览淘宝、京东、中国大学MOOC等网站,不难发现它们的首页都有一个幻灯片,有左右箭头以及索引按钮来操作幻灯片。做这种幻灯片需要用到jQuery的一个幻灯片插件:Skipper,下面就给出制作带左右箭头及索引按钮的幻灯片的代码。最后下载JavaScript代码时,需右键点击下载,在弹出的菜单里选择链接另存为,才能下载下来。
HTML代码
<!DOCTYPE html> <html class="no-js"> <head> <meta charset="gb2312"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>jQuery幻灯片插件Skippr</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/jquery.skippr.css"> </head> <body> <div class="hero"> <div id="random"> <div class="yellow"></div> <div style="background-image: url(img/test2.jpg)"></div> <div style="background-image: url(img/test5.jpg)"></div> <div style="background-image: url(img/test3.jpg)"></div> <div style="background-image: url(img/test4.jpg)"></div> </div> <div class="container"> <div class="tagline"> <h1>Skippr.</h1> <p>A lighter, faster slideshow plugin for jQuery.</p> </div> </div> </div> <script src="js/jquery.min.js"></script> <script src="js/jquery.skippr.min.js"></script> <script> $(document).ready(function() { $("#random").skippr(); }); </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> </div> </body> </html>
CSS代码
jquery.skippr.css
.skippr { width:100%; height:100%; position: relative; overflow:hidden; } .skippr > div { position: absolute; width:100%; height:100%; background-size: cover; background-position: 50% 62.5%; } .skippr > img { position: absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%); width:100%; min-height: 100%; } .skippr-nav-container { position: absolute; left:50%; -webkit-transform:translate(-50%,0); transform:translate(-50%,0); -moz-transform:translate(-50%,0); -ms-transform:translate(-50%,0); bottom:25px; overflow: auto; z-index:999; } .skippr-nav-element { cursor:pointer; float:left; background-color: rgba(255,255,255,0.5); -webkit-transition: all .25s linear; transition: all .25s linear; } .skippr-nav-element-bubble { width:12px; height:12px; border-radius: 50%; margin:0 4px; } .skippr-nav-element-block { width:60px; height:10px; } .skippr-nav-element:hover, .skippr-nav-element-active { background-color:rgba(255,255,255,1); } .skippr-arrow { position: absolute; z-index:999; top:50%; -webkit-transform:translate(0%,-50%); -moz-transform:translate(0%,-50%); -ms-transform:translate(0%,-50%); transform:translate(0%,-50%); width:30px; height:30px; /*background-color: white;*/ transform-origin:center center; -webkit-transform-origin:top left; cursor: pointer; } .skippr-previous { left:2.5%; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); border-top:2px solid white; border-left:2px solid white; } .skippr-next { right:3.5%; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); border-bottom:2px solid white; border-right:2px solid white; }
reset.css
html{color:#000;background:#FFF;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0;} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} li{list-style:none;} caption,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} q:before,q:after{content:'';} abbr,acronym{border:0;font-variant:normal;} sup{vertical-align:text-top;} sub{vertical-align:text-bottom;} input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;} input,textarea,select{*font-size:100%;} legend{color:#000;} del,ins{text-decoration:none;} a { color:black; text-decoration: none; } p,h1 { -webkit-margin-before: 0em; -webkit-margin-after: 0em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; } body { width:100%; height:100%; } div, span, p { -webkit-font-smoothing:antialiased; }
style.css
html, body { height: 100%; width: 100%; -webkit-font-smoothing: antialiased; font-family: "Helvetica Neue", "HelveticaNeue", "Helvetica-Neue", Helvetica, Arial, sans-serif; } .yellow { background-color: #ffdb56; } .btn { width: 200px; height: 55px; border: 2px solid white; color: white; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; transition: all 0.25s ease; cursor: pointer; line-height: 220%; } .btn:hover { background-color: white; color: #ffdb56; } .hero { width: 100%; height: 80%; min-height: 500px; position: relative; } .hero .container { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 80%; height: 80%; z-index: 999; } .hero .tagline { font-family: "Helvetica Neue", "HelveticaNeue", "Helvetica-Neue", Helvetica, Arial, sans-serif; font-weight: bold; letter-spacing: -3px; width: 40%; padding: 8% 0 0 0; float: left; color: white; } .hero .tagline p { font-size: 4rem; line-height: 4rem; margin-top: 10px; } @media (max-width: 1450px) { .hero .tagline p { font-size: 2.8rem; line-height: 2.8rem; letter-spacing: -2px; } } @media (max-width: 600px) { .hero .tagline p { font-size: 2rem; } } .hero .tagline h1 { font-weight: bold; font-size: 7rem; letter-spacing: -0.25rem; line-height: 7rem; } @media (max-width: 1450px) { .hero .tagline h1 { font-size: 5rem; line-height: 5rem; } } @media (max-width: 1450px) { .hero .tagline { padding: 9% 0 0 0; } } @media (max-width: 800px) { .hero .tagline { float: none; width: 100%; margin-bottom: 70px; } } .hero .downloads { float: right; width: 40%; color: white; font-family: "Helvetica Neue", "HelveticaNeue", "Helvetica-Neue", Helvetica, Arial, sans-serif; font-weight: bold; letter-spacing: -1px; font-size: 1.5rem; height: 100%; position: relative; } .hero .downloads .btn-container { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; } .hero .downloads .btn-container .btn { float: right; text-align: center; margin-left: 20px; } @media (max-width: 800px) { .hero .downloads .btn-container .btn { float: left; margin: 20px 20px 0 0; } } @media (max-width: 800px) { .hero .downloads { float: none; width: 100%; height: auto; } } .content { width: 80%; height: auto; margin: 0 auto; color: #464646; letter-spacing: -1px; padding: 75px 0 75px 0; } .content h2 { font-size: 3rem; font-weight: bold; margin: 0 0 10px 0; } .content p { font-size: 1.4rem; font-weight: normal; } .content code { display: block; min-height: 100px; width: 100%; margin: 20px 0 20px 0; padding: 10px 0; } code { background-color: #464646; color: #ffdb56; font-size: 1rem; } @media (max-width: 800px) { code { font-size: .8rem; } } @media (max-width: 600px) { code { font-size: .5rem; } } #code-header { margin-bottom: 0px; } #code-footer { margin-top: 0px; } .code-comment { font-style: italic; color: gray; } hr { margin: 50px 0; } .download { position: relative; width: 100%; height: 250px; background-color: #ffdb56; margin-top: 100px; color: white; font-weight: bold; letter-spacing: -1px; font-size: 1.5rem; } .download h1 { font-weight: bold; font-size: 7rem; letter-spacing: -0.25rem; line-height: 7rem; } @media (max-width: 1450px) { .download h1 { font-size: 5rem; line-height: 5rem; } } .download .btn { text-align: center; } .download > div { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 80%; } .download > div > * { float: left; } .download > div .btn-container { width: 500px; float: right; margin-top: 10px; } .download > div .btn-container .btn { float: right; margin-left: 20px; } @media (max-width: 800px) { .download { display: none; } } footer { width: 100%; height: 400px; background-color: #464646; position: relative; } footer .info { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; color: white; font-size: 1.25rem; letter-spacing: -1px; } footer .info a { color: white; }