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

jquery简单轻巧的响应式幻灯插件Minimus slider

媒体 fishcity 1479浏览

jquery简单轻巧的响应式幻灯插件Minimus slider

Minimus slider是一款简单且轻巧的jquery响应式幻灯片插件,它与内容滑块插件 μslider是兄弟关系。作者都是musings.it

特点

响应式(可调整浏览器测试)

只有几个基本参数,设置简单

与其大哥哥 μslider一样,可以包含任何(HTML5 HTML5视频、图像、音频、iframes文本,…)但是它出生是主要用于图像

使用方法

引入核心文件

<!-- base CSS rules for minimus -->
<link rel="stylesheet" type="text/css" media="screen" href="path/to/minimus_style.css"/>

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

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

创建html

<div id="my_slider" class="minimus-slider">

	<!-- images -->
	<!-- for images lazy loading insert a placeholder in "src" and the path to the image in "data-src" -->
	<div class="minimus-slide">
		<img src="images/placeholder.gif" data-src="path/to/img.jpg" alt="alt text" title="img caption" />
		<!-- insert an image "title" if you want a caption for your image -->
	</div>
	
	<!-- HTML5 audio -->
	<div class="minimus-slide">
		<audio controls="controls" preload="none">
			<source src="path/to/audio.ogg" type="audio/ogg" />
			<source src="path/to/audio.mp3" type="audio/mpeg" />
			<p>Your browser does not support HTML5 audio element</p>
		</audio>
	</div>
	
	<!-- HTML5 video -->
	<div class="minimus-slide">
		<video width="width" height="height" controls="controls" poster="poster.png" preload="none">
			<source src="path/to/video.ogg" type="video/ogg" />
			<source src="path/to/video.mp4" type="video/mp4" />
			<p>Your browser does not support HTML5 video element</p>
		</video>
	</div>
	...
</div>
<!-- navigation controls -->
<div class="minimus-navslide">
	<span class="minimus-prev">previous slide</span>
	<span class="minimus-start">start auto play</span>
	<span class="minimus-stop">stop auto play</span>
	<span class="minimus-next">next slide</span>
</div>

写入CSS

.minimus-slider {
	position: relative;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
}

.minimus-slide {
	position: absolute;
	left: 0;
	top: 0;
}

.minimus-navslide {
/* style as you wish, this is only an example */
	position: relative;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	text-align: center;
}.minimus-navslide span {
	position: relative;
	cursor: pointer;	
}
						
.minimus-caption {
/* style as you wish, this is only an example */
	position: absolute;
	bottom: -2.625em;
	width: 100%;
	background: rgba(20,20,20,0.7);
	color: #f7f7f7;
	border: none;
	border-top: 1px solid #404040;
}

写入JS,初始化

$(document).ready(function(){
	$("#my_slider").minimus();
});

参数

转载请注明:jQ酷 » jquery简单轻巧的响应式幻灯插件Minimus slider

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