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

jquery响应式内容滑块插件μslider

媒体 fishcity 1759浏览

jquery响应式内容滑块插件μslider

μslider是一款轻量的jquery响应式内容滑块插件,滑动的内容可以是图片,视频,音频,文字,iframes等所有html内容。在新的2.0版本,μslider为响应式,具有“swipe touch”功能,支持移动/触摸设备!μslider非常容易使用,因为它有一些基本的选项可以直截进行配置使用。

使用方法

基础的html

<!-- define a container for the slides -->
<!-- choose an ID for your container (in our example id="my_slider") it must have class "slider" -->

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

	<!-- every slide must have class "slide" -->
	<!-- the content can be an image -->
	
	<div class="slide">
		<img src="path/image/img.jpg" alt="alternative text" title="image caption" />
		<!-- note: if "title" is empty no caption will be shown -->
	</div>
	
	<!-- or the content can be a text -->
	
	<div class="slide">
		<h1>title</h1>
		<h2>subtitle</h2>
		<p>paragraph of a random text</p>
	</div>
	
	<!-- or a text + an image -->
	
	<div class="slide">
		<p>text paragraph + image</p>
		<img src="path/image/img.jpg" alt="alternative text" title="image caption" />
	</div>
</div>

<!-- buttons for slide navigation control -->
<!-- the container must have class "navslide" -->

<div class="navslide">
	<p>
		<!-- it is important that the control buttons have these classes -->
		
		<span class="prev"><img src="path/image/prev.jpg" alt="prev" title="prev" /></span>
		<span class="start"><img src="path/image/start.jpg" alt="start" title="start" /></span>
		<span class="stop"><img src="path/image/stop.jpg" alt="stop" title="stop" /></span>
		<span class="next"><img src="path/image/next.jpg" alt="next" title="next" /></span>
	</p>
	<!-- note: instead of images you can simply use words inside the <span> element -->
</div>

基础的图片lazy加载

<!-- "lazy" load is used to load images only when necessary -->
<!-- put the url of a placeholder image in "src" and the address of the image to be loaded in "data-src" -->

<div class="slide">
	<img src="path/image/placeholder.jpg" data-src="path/image/img.jpg" alt="alternative text" title="image caption" />
</div>	

基础的音频视频html

<!-- HTML5 audio -->

<div class="slide">
	<audio controls="controls" preload="none">
		<source src="path/audio/audio.ogg" type="audio/ogg" />
		<source src="path/audio/audio.mp3" type="audio/mpeg" />
		<p>Your browser does not support html5 audio element.</p>
	</audio>
</div>
	
<!-- HTML5 video -->

<div class="slide">
	<video width="880" height="495" controls="controls" poster="poster.png" preload="none">
		<source src="path/video/video.ogg" type="video/ogg" />
		<source src="path/video/video.mp4" type="video/mp4" />
		<p>Your browser does not support html5 video element.</p>
	</video>
</div>

<!-- Vimeo audio and video -->
	
<div class="slide">
	<!-- it is important that the <iframe> has an ID and class "vimeo" -->
	<!-- in "src" after video_id? add api=1 and player_id=ID (look at the code below) -->
	
	<iframe id="player1" class="vimeo" src="http://player.vimeo.com/video/video_id?api=1&player_id=player1&title=0&byline=0&portrait=0&color=cc0000" width="880" height="495" frameborder="0" allowFullScreen></iframe>
</div>

<!-- audio e video YouTube -->

<div class="slide">
	<!-- it is important that the <div> has an ID, class "youtube" and a data-src attribute with the video ID -->
	
	<div id="player2" class="youtube" data-src="video_id">
	</div>
</div>

基础CSS样式

/*
* container style
*/

.slider {
	position: relative;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
	border: 12px solid #fff;
	border-radius: 5px;
	background: #fafafa;
}

/*
* single slide style
*/

.slide {
	position: absolute;
	left: 0px;
	top: 0px;
}

/*
* image caption style
*/

.caption {
	position: absolute;
	bottom: -42px;
	width: 100%;
	background: #222;
	background: rgba(20,20,20,0.7);
	color: #f7f7f7;
	border-top: 1px solid #404040;
}

.caption p {
	padding: 0px 10px;
}

/*
* slides control buttons style
*/

.navslide {
	position: relative;
	margin: 15px auto;
	padding: 0;
	text-align: center;
}

.navslide p span {
	margin: 0px 10px;
	cursor: pointer;
}

.start, .stop {
	display: none;
}

引入核心文件

<!-- basic μslider css -->
<link rel="stylesheet" type="text/css" media="screen" href="path/css/muslider_style.css" />

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

<!-- your μslider version -->
<script type="text/javascript" src="path/js/jquery.muslider-2.0.min.js" ></script>

<!-- if you have included Vimeo videos (tip: include this file at the end before closing </body>) -->
<script type="text/javascript" src="path/js/jquery.vimeosupport-1.0.min.js" ></script>

<!-- if you have included YouTube videos (tip: include this file at the end before closing </body>) -->
<script type="text/javascript" src="path/js/jquery.youtubesupport-1.0.min.js" ></script>

初始化插件

<!-- in our example the container has id="my_slider" thus -->

<script type="text/javascript">
	$(document).ready(function(){
		$("#my_slider").muslider();
	});	
</script>	

使用参数

$("#my_slider").muslider({
	"responsive": "yes",
	"ratio": 0.5,
	"width": "80%",
	"height": "80%",
	"animation_start": "manual",
	"animation_type": "horizontal",
	"animation_duration": 500,
	"animation_interval": 5000
});

转载请注明:jQ酷 » jquery响应式内容滑块插件μslider

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