fullscreen-slit-slider由 jQuery 和 css3 打造而成。为我们提供了一个全屏的撕裂效果的幻灯片,接下来我就为大家讲解以下相关的用法。
1、下载插件包 点击下载
2、将 css 和 js两个文件夹复制到自己的网站中
3、引入以下的js和css文件
1 2 3 4 5 6 7 8 | < link rel = "stylesheet" type = "text/css" href = "css/demo.css" > < link rel = "stylesheet" type = "text/css" href = "css/style.css" > < link rel = "stylesheet" type = "text/css" href = "css/custom.css" > < script type = "text/javascript" src = "js/modernizr.custom.79639.js" > </ script > < noscript > < link rel = "stylesheet" type = "text/css" href = "css/styleNoJS.css" /> </ noscript > |
=========以下内容由 LC 提供===============
加入幻灯片的主体html标签链接文字
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | < div id = "slider" class = "sl-slider-wrapper" > < div class = "sl-slider" > < div class = "sl-slide bg-1" > < div class = "sl-slide-inner" > < div class = "deco" data-icon = "H" ></ div > < h2 >A bene placito</ h2 > < blockquote > < p >You have just dined...</ p > < cite >Ralph Waldo Emerson</ cite > </ blockquote > </ div > </ div > < div class = "sl-slide bg-2" > < div class = "sl-slide-inner" > < div class = "deco" data-icon = "q" ></ div > < h2 >Regula aurea</ h2 > < blockquote > < p >Until he extends the circle...</ p > < cite >Albert Schweitzer</ cite > </ blockquote > </ div > </ div > < div class = "sl-slide bg-2" > <!-- ... --> </ div > <!-- ... --> </ div > < nav id = "nav-arrows" class = "nav-arrows" > < span class = "nav-arrow-prev" >Previous</ span > < span class = "nav-arrow-next" >Next</ span > </ nav > < nav id = "nav-dots" class = "nav-dots" > < span class = "nav-dot-current" ></ span > < span ></ span > < span ></ span > < span ></ span > < span ></ span > </ nav > </ div > |
特别申明:
本站所有资源都是由网友投稿发布,或转载各大下载站,请自行检测软件的完整性!
本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!
如有侵权请联系我们删除下架,联系方式:lei1294551502@163.com