WIDE – jQuery带圆圈加载进度的Slider|宽屏图片切换插件

WIDE – jQuery带圆圈加载进度的Slider|宽屏图片切换插件2115
WIDE一个jQuery插件,以幻灯片的方式显示你的内容,插件的特点是:自定义颜色,播放设置,充分响应,现代的外观和感觉,干净和宽敞的设计。
  自定义设置每个滑块(加载进度的颜色,是自动播放按钮,开始自动播放,播放间隔)
  键盘导航支持
  每个幻灯片设置
  充分响应
  下一个/之前的幻灯片导航
  设置为全高度(滑块的高度总是等于窗口的高度)
  自定义标题、副标题和按钮设计
  现代的外观和感觉,清洁
先引用样式和js文件
        <!--WIDE PLUGIN RELATED SCRIPTS AND STYLES-->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="wide_assets/fonts.css">
        <link rel="stylesheet" type="text/css" href="wide_assets/wide.css">       
        <script type="text/javascript" src="wide_assets/jquery-1.11.2.min.js"></script>                
        <script type="text/javascript" src="wide_assets/TweenMax.min.js"></script>     
        <script type="text/javascript" src="wide_assets/jquery.easypiechart.js"></script>           
        <script type="text/javascript" src="wide_assets/wide.js"></script>
        <!--END WIDE PLUGIN RELATED SCRIPTS AND STYLES-->    
简单的调用例子
<!--slide-->
<div class="wd_slide" data-overlay-alpha="18">
    <a class="wd_slideImage" href="slider_photos/1.jpg"></a>
</div>
<!--/slide-->    
带内容的
  1.wdTitle:大幻灯片标题(左/右/中心位置通过添加关注类:wd_center,wd_left,wd_right)
  2.wdTitleUnderlineUI:一个下划线(大标题下看起来不错)
  3.wdTitleSmall:小幻灯片标题(左/右/中心位置通过添加关注类:wd_center,wd_left,wd_right)
  4.wdSmallParagrafUI:小段(左/右/中心位置通过添加关注类:wdSmallParagrafCenter,wdSmallParagrafLeft,wdSmallParagrafRight)
  5.wdButton:按钮
<!--slide-->
<div class="wd_slide" data-overlay-alpha="18">
    <a class="wd_slideImage" href="slider_photos/1.jpg"></a>
    <!--slide content-->
    <div class="wdSlideContent">
        <p class="wdTitle wd_center" style="color:#FFFFFF;">WIDE - SHOWCASE SLIDER</p>
        <div class="wdTitleUnderlineUI"><div class="wdTitleUnderline" style="background-color: #FFFFFF;"></div></div>
        <p class="wdTitleSmall wd_center" style="color:#FFFFFF;">jQuery plugin</p>
        <div class="wdSmallParagrafUI wdSmallParagrafCenter">
            <p style="color:#FFFFFF; text-align:center;">WIDE is a jQuery plugin that shows your work in an interactive way. You can use it within your webiste content.</p>
        </div>                              
        <div class="wd_center">
            <a class="wdButton" data-secondcolor="#020202" href="#">see more</a>
        </div>             
        
    </div>
    <!--slide content-->
</div>
<!--/slide-->

也许你还喜欢