注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jquery多用途响应式幻灯片插件Divas Slider

媒体 fishcity 2678浏览

jquery响应式幻灯片

Divas Slider是一款jquery多用途的响应式幻灯片插件,容易使用和完全可定制,基于jQuery使用CSS3转换效果,同时向后兼容旧浏览器,完全响应式和触摸支持。

特点:

CSS3转换特效制作幻灯片和字幕,使用jQuery向后兼容浏览器。

容易和完全可定制——使用CSS和参数控制

完全响应布局,您可以指定大小百分比。

触摸支持——可在移动设备触摸滑动。

不限幻灯片的数量,您可随意添加图片。

无限循环——滑块两种方式,你可以在两个导航方向无限循环的查看。

多个实例,可以添加多个滑块在相同的页面上。

自动播放幻灯片。

子弹可选——你可以激活使用。

全屏幕,您可以使用滑块在全屏模式。

链接,您可以添加链接到整个幻灯片或标题。

延迟加载——更好的性能和体验。

回调函数,在幻灯片之前,滑动或点击时回调函数。

不需要额外的jQuery插件

jquery实例:Divas Slider使用方法

引入核心文件

<!-- Divas Slider skin -->
<link rel="stylesheet" type="text/css" media="screen" href="path-to-css/divas_free_skin.css" />

<!-- your jQuery version -->
<script type="text/javascript" src="path-to-js/jquery-2.1.1.min.js"></script>

<!-- your Divas Slider version -->
<script type="text/javascript" src="path-to-js/jquery.divas-1.0.min.js"></script>

构建基础的html

<div id="YourSliderContainer" class="divas-slider">
  <ul class="divas-slide-container">
    <li class="divas-slide"> 
      <!-- for images lazy loading insert a placeholder in "src" and the path to the image in "data-src" --> 
      <img src="path/to/placeholder.gif" data-src="path/to/img.jpg" data-title="slide title"/> 
      <!-- insert an image "data-title" if you want a caption for your image --> 
      <!-- you can also insert HTML code in the "data-title" and style it in your CSS as you wish --> 
    </li>
    <li class="divas-slide"> <img src="path/to/placeholder.gif" data-src="path/to/img.jpg" /> </li>
    <li class="divas-slide"> <img src="path/to/placeholder.gif" data-src="path/to/img.jpg" /> </li>
  </ul>
  <!-- navigation and controls -->
  <div class="divas-navigation"> <span class="divas-prev">previous</span> <span class="divas-next">next</span> </div>
  <div class="divas-controls"> <span class="divas-start">start</span> <span class="divas-stop">stop</span> </div>
</div>

构建基本的CSS样式

/*
 * Divas Slider main style
 * Do not edit or edit with extreme care!
 * These rules are mandatory for Divas Slider to work correctly
 */
.divas-slider {
	position: relative;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: auto;
	overflow: hidden;
}

.divas-slide-container {
	position: relative;
	margin: 0;
	padding: 0;
}

.divas-slide-container:before,
.divas-slider-container:after {
  content: "";
  display: table;
  clear: both;
}

.divas-slide {
	position: relative;
	margin: 0;
	padding: 0;
	float: left;
	overflow: hidden;
}

.divas-slide img {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	outline: 0 none;
	-webkit-backface-visibility: hidden;
  	-moz-backface-visibility: hidden;
 	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

基础实例化

$(document).ready(function() {
	$("#YourSliderContainer").divas();
});

更多的操作方法请参考实例文档。

转载请注明:jQ酷 » jquery多用途响应式幻灯片插件Divas Slider

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。