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

超轻型响应jQuery旋转木马幻灯片插件anoSlide

媒体 fishcity 1606浏览

anoSlide是一款超轻型响应式jQuery旋转木马幻灯片插件。它适合在PC端与移动端实现旋转木马幻灯片特效。

特点

响应式——适应任何视窗的宽度

混合内容

不需要CSS

轻量级(< 8 kb未压缩)

基于jQuery构建

集成图像预加载

回调函数——onConstruct onStart,onEnd

多个可配置选项

延迟加载图片

自动旋转

容易扩展

jquery实例:anoSlide使用方法

引入核心文件

<script src="http://libs.useso.com/js/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.anoslide.js"></script>

写入基础CSS样式,可根据项目完全自定义

.carousel {
	position: relative;
	min-height: 20px;
	height: auto !important;
	height: 20px;
	background: url(images/loader.gif) center center no-repeat;
}
.carousel .next,  .carousel .prev {
	display: none;
	width: 56px;
	height: 56px;
	position: absolute;
	bottom: 20px;
	left: 50%;
	margin-top: -28px;
	z-index: 9999;
	cursor: pointer;
}
.carousel .prev {
	margin-left: -60px;
	background: url(images/prev.png) 0 0 no-repeat;
}
.carousel .next {
	margin-right: -60px;
	background: url(images/next.png) 0 0 no-repeat;
}
.carousel li {
	display: none;
}
.carousel li img {
	width: 100%;
	height: auto;
}
.paging {
	position: absolute;
	z-index: 9998;
}
.paging > a {
	display: block;
	cursor: pointer;
	width: 40px;
	height: 40px;
	float: left;
	background: url(images/dots.png) 0px -40px no-repeat;
}
.paging > a:hover,  .paging > a.current {
	background: url(images/dots.png) 0px 0px no-repeat;
}
.badge {
	display: block;
	width: 104px;
	height: 104px;
	background: url(images/badge.png) 0 0 no-repeat;
	z-index: 9000;
	position: absolute;
	top: -3px;
	left: -3px;
}
img {
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	-o-user-select: none;
	user-select: none;
}

jquery旋转木马anoSlide混合显示

1、混合演示(只显示一item)

JS

$('.carousel ul').anoSlide(
{
	items: 1,
	speed: 500,
	prev: 'a.prev',
	next: 'a.next',
	lazy: true,
	auto: 4000
})

html

<div class="carousel">
	<a class="prev"></a>
	<ul>
		<li>Content goes here</li>
		<li>Content goes here</li>
		<li>Content goes here</li>
	</ul>
	<a class="next"></a>
</div>

jquery幻灯片anoSlide多图

2、多item

JS

$('.carousel[data-mixed] ul').anoSlide(
{
	items: 5,
	speed: 500,
	prev: 'a.prev[data-prev]',
	next: 'a.next[data-next]',
	lazy: true,
	delay: 100})

HTML

<div class="carousel" data-mixed=""> <a class="prev" data-prev=""></a>
  <ul>
    <li>
      <div class="wrap">
        <figure><img data-src="images/slides/thumbnails/1.jpg" src="images/slides/1.jpg"></figure>
      </div>
    </li>
    <li>
      <div class="wrap">
        <figure><img data-src="images/slides/thumbnails/2.jpg" src="images/slides/2.jpg"></figure>
      </div>
    </li>
    <li>
      <div class="wrap">
        <figure><img data-src="images/slides/thumbnails/3.jpg" src="images/slides/3.jpg"></figure>
      </div>
    </li>
    <li>
      <div class="wrap">
        <figure><img data-src="images/slides/thumbnails/4.jpg" src="images/slides/4.jpg"></figure>
      </div>
    </li>
    <li>
      <div class="wrap">
        <figure><img data-src="images/slides/thumbnails/5.jpg" src="images/slides/5.jpg"></figure>
      </div>
    </li>
    <li>
      <div class="wrap">
        <figure><img data-src="images/slides/thumbnails/6.jpg" src="images/slides/6.jpg"></figure>
      </div>
    </li>
    <li>
      <div class="wrap">
        <figure><img data-src="images/slides/thumbnails/7.jpg" src="images/slides/7.jpg"></figure>
      </div>
    </li>
  </ul>
  <a class="next" data-next=""></a> </div>

jquery旋转木马anoSlide分页

3、分页

js

$('.carousel ul').anoSlide(
{
	items: 1,
	speed: 500,
	prev: 'a.prev[data-prev-paging]',
	next: 'a.next[data-next-paging]',
	lazy: true,
	onConstruct: function(instance)
	{
		var paging = $('<div/>').addClass('paging fix').css(
		{
			position: 'absolute',
			top: 1,
			left:50 + '%',
			width: instance.slides.length * 40,
			marginLeft: -(instance.slides.length * 40)/2
		})
		
		/* Build paging */
		for (i = 0, l = instance.slides.length; i < l; i++)
		{
			var a = $('<a/>').data('index', i).appendTo(paging).on(
			{
				click: function()
				{
					instance.stop().go($(this).data('index'));
				}
			});
			
			if (i == instance.current)
			{
				a.addClass('current');
			}
		}

		instance.element.parent().append(paging);
	},
	onStart: function(ui)
	{
		var paging = $('.paging');
		
		paging.find('a').eq(ui.instance.current).addClass('current').siblings().removeClass('current');
	}
})

html

<div class="carousel">
	<a class="prev"></a>
	<ul>
		<li>Content goes here</li>
		<li>Content goes here</li>
		<li>Content goes here</li>
	</ul>
	<a class="next"></a>
</div>

jquery幻灯片anoSlide标题

4、标题描述

js

$('.carousel.captions ul').anoSlide(
{
	items: 1,
	speed: 500,
	prev: 'a.prev[data-prev-caption]',
	next: 'a.next[data-next-caption]',
	lazy: true,
	onStart: function(ui)
	{
		/* Remove existing caption in slide */
		ui.slide.element.find('.caption').remove();
	},
	onEnd: function(ui)
	{
		/* Get caption content */
		var content = ui.slide.element.data('caption');
		
		/* Create a caption wrap element */
		var caption = $('<div/>').addClass('caption').css(
		{
			position: 'absolute', 
			background: 'rgb(0,0,0)',
			color: 'rgb(255,255,255)',
			textShadow: 'rgb(0,0,0) -1px -1px',
			opacity: 0.5,
			top: -100,
			left: 50,
			padding: 20,
			webkitBorderRadius: 5,
			mozBorderRadius: 5,
			borderRadius: 5
		}).html(content);
		
		/* Append caption to slide and animate it. Animation is really up to you. */
		caption.appendTo(ui.slide.element).animate(
		{
			top:50
		});
	}
})

html

<div class="carousel captions">
	<a class="prev" data-prev-caption></a>
	<ul>
		<li data-caption="Adding captions is really easy">
			<figure><img data-src="images/slides/1.jpg" src="" /></figure>
		</li>
		<li data-caption="anoSlide's callback functions can be used for adding Captions">
			<figure><img data-src="images/slides/2.jpg" src="" /></figure>
		</li>
		<li data-caption="<span style='color:#00f0ff'>HTML - No problem</span><br /><br />It's really up to You to decide whether to use HTML or not.">
			<figure><img data-src="images/slides/3.jpg" src="" /></figure>
		</li>
		<li>
			<figure><img data-src="images/slides/4.jpg" src="" /></figure>
		</li>
		<li>
			<figure><img data-src="images/slides/5.jpg" src="" /></figure>
		</li>
		<li>
			<figure><img data-src="images/slides/6.jpg" src="" /></figure>
		</li>
		<li>
			<figure><img data-src="images/slides/7.jpg" src="" /></figure>
		</li>
	</ul>
	<a class="next" data-next-caption></a>
	<a class="badge"></a>
</div>

转载请注明:jQ酷 » 超轻型响应jQuery旋转木马幻灯片插件anoSlide

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