jQuery带倒计时响应式轮播图插件edslider

使用方法：

引入必要CSS样式

<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' type='text/css'>
<link rel="stylesheet" href="css/edslider.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/animate-custom.css">

引入jQuery库文件、插件JS文件

<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="js/jquery.edslider.js"></script>

插件初始化、参数配置

$(document).ready(function(){
      //Call plugin
      $('.mySlideshow').edslider({
          width : '100%',
          height: 500
      });
  });

HTML结构

<ul class="mySlideshow">
    <li class="first">
        <a href="#" target="_blank" class="animated fadeInLeft">
            <img src="images/hd-logo.png" width="330" height="255" alt="Harley-Davidson">
        </a>
        <div class="animated fadeInRight">It's time to ride!</div>
    </li>
    <li class="second">
        <img src="images/second-title.png" class="animated fadeInRight">
    </li>
    <li class="third">
        <img src="images/third-title.png" class="animated fadeInLeft">
    </li>
    <li class="fourth">
        <img src="images/fourth-title.png" class="animated fadeInRight">
    </li>
    <li class="fifth">
        <img src="images/fifth-title.png" class="animated fadeInLeft">
    </li>
</ul>

edslider是一款时尚的响应式jQuery焦点图插件。该焦点图插件支持图片、文字或混合内容，支持无限轮播效果。它的特点还有：

• 响应式设计。

• 带进度条显示焦点图的进度。

• 自动播放，无限循环。

• 可以自定义皮肤。

• 支持图层加载时显示spinner。