Hero Slider – jQuery全屏响应式幻灯片
简介
Hero Slider 是一款使用 CSS 和 jQuery 制作的全屏响应式幻灯片，它并不算一个通用的幻灯片，因为没有以 jQuery 插件的形式发布。但它的定制度非常高，你可以在 HTML 内写入任何内容，在 CSS 中定制任意的动画效果，甚至是使用视频作为背景。
浏览器兼容
 |
 |
 |
 |
 |
|---|---|---|---|---|
| IE9+ ✔ | Chrome ✔ | Firefox ✔ | Opera ✔ | Safari ✔ |
使用方法
1、引入文件
<link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery.min.js"></script> <script src="js/main.js"></script>
2、HTML
<div class="dowebok"> <div class="cd-hero"> <!-- 幻灯片 --> <ul class="cd-hero-slider"> <li class="selected"> <div class="cd-full-width"> <h2>Hero slider</h2> <p>一个简单的 CSS & jQuery 全屏响应式幻灯片</p> <a href="javascript:" class="cd-btn" target="_blank">文章 & 下载</a> </div> </li> <li> <div class="cd-full-width"> </div> </li> ...... </ul> <!-- 幻灯片导航 --> <div class="cd-slider-nav"> <nav> <span class="cd-marker item-1"></span> <ul> <li class="selected"><a href="javascript:">简介</a></li> <li><a href="javascript:">第二</a></li> <li><a href="javascript:">第三</a></li> <li><a href="javascript:">视频</a></li> <li><a href="javascript:">图片</a></li> </ul> </nav> </div> </div> </div>
Hero Slider 主页：//codyhouse.co/gem/hero-slider/
