基于jquery实现焦点图轮播插件



67 266 89



特效描述:基于jquery实现 焦点图轮播,基于jquery实现焦点图轮播插件

代码结构

1. 引入CSS

<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/import.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.anoslide.js"></script>

3. HTML代码

		<div class="wrapper">
			<h2>1. Mixed content demo (One visible item)<em>Resize your browser to review responsive effect</em></h2>
			<div class="carousel">
				<a class="prev" data-prev-mixed></a>
				<ul>
					<li>
						<figure><img data-src="images/slides/1.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure>
					</li>
					<li>
						<figure><img data-src="images/slides/2.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure>
					</li>
					<li>
						<figure><img data-src="images/slides/3.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure>
					</li>
					<li>
						<figure><img data-src="images/slides/4.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure>
					</li>
					<li>
						<figure><img data-src="images/slides/5.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure>
					</li>
					<li>
						<figure><img data-src="images/slides/6.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure>
					</li>
					<li>
						<figure><img data-src="images/slides/7.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure>
					</li>
				</ul>
				<a class="next" data-next-mixed></a>
				<a class="badge"></a>
			</div>
		</div>
		<script type="text/javascript">
			$('.carousel ul').anoSlide(
			{
				items: 1,
				speed: 500,
				prev: 'a.prev[data-prev-mixed]',
				next: 'a.next[data-next-mixed]',
				lazy: true
			})
		</script>
				<div class="wrapper">
			<h2>2. Multiple items<em>Resize your browser to review responsive effect</em></h2>
			<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=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="" /></figure></div>
					</li>
					<li>
						<div class="wrap"><figure><img data-src="images/slides/thumbnails/2.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure></div>
					</li>
					<li>
						<div class="wrap"><figure><img data-src="images/slides/thumbnails/3.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure></div>
					</li>
					<li>
						<div class="wrap"><figure><img data-src="images/slides/thumbnails/4.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure></div>
					</li>
					<li>
						<div class="wrap"><figure><img data-src="images/slides/thumbnails/5.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure></div>
					</li>
					<li>
						<div class="wrap"><figure><img data-src="images/slides/thumbnails/6.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure></div>
					</li>
					<li>
						<div class="wrap"><figure><img data-src="images/slides/thumbnails/7.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure></div>
					</li>
				</ul>
				<a class="next" data-next></a>
				<a class="badge"></a>
			</div>
		</div>
		<script type="text/javascript">
			$('.carousel[data-mixed] ul').anoSlide(
			{
				items: 5,
				speed: 500,
				prev: 'a.prev[data-prev]',
				next: 'a.next[data-next]',
				lazy: true,
				delay: 100
			})
		</script>
                	</div>
                </div>
            </div>
		</div>
		<div class="wrapper">
			<h2>3. Paging<em>Anoslide is designed to provide suitable hooks in the form of callback functions allowing you to easily extend the plugin without updating it's core.</em></h2>
			<div class="carousel pagination">
				<a class="prev" data-prev-paging></a>
				<ul>
					<li>
						<figure><img data-src="images/slides/1.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure>
					</li>
					<li>
						<figure><img data-src="images/slides/2.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure>
					</li>
					<li>
						<figure><img data-src="images/slides/3.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure>
					</li>
					<li>
						<figure><img data-src="images/slides/4.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure>
					</li>
					<li>
						<figure><img data-src="images/slides/5.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure>
					</li>
					<li>
						<figure><img data-src="images/slides/6.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure>
					</li>
					<li>
						<figure><img data-src="images/slides/7.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></figure>
					</li>
				</ul>
				<a class="next" data-next-paging></a>
				<a class="badge"></a>
			</div>
		</div>
		<script type="text/javascript">
			$('.carousel.pagination 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');
				}
			})
		</script>
                	</div>
                </div>
            </div>
		</div>
				<div class="wrapper">
			<h2>3. Captions example<em>Check out the example below and see how a captions can be added without changing anoSlide's code at all. It's really fun.</em></h2>
			<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>
				</ul>
				<a class="next" data-next-caption></a>
				<a class="badge"></a>
			</div>
		</div>
		<script type="text/javascript">
			$('.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)
				{
					ui.slide.element.find('.caption').remove();
				},
				onEnd: function(ui)
				{
					var content = ui.slide.element.data('caption');
					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);
					caption.appendTo(ui.slide.element).animate(
					{
						top:50
					});
				}
			})
		</script>
                	</div>
                	<div>
                	</div>
                </div>
            </div>
		</div>
		<script type="text/javascript">
			Demo.bind()
		</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动滑过 滚动切换 滑动选项卡切换 flash焦点图 选项卡切换 滑动手风琴 切换按钮 form表单 焦点图幻灯片 滑动选项卡切换 图片切换 全屏焦点图 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到