带水平滑杆的jQuery焦点图动画插件

本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划

这是一款很实用的jQuery焦点图动画插件,跟其他jQuery焦点图插件不同的是,它带有一个水平的滑杆,你可以通过滑动滑杆实现图片的切换,也可以通过点击图片来切换。这款焦点图是纯jQuery实现的,兼容性和实用性都还可以,而且也比较简单,很容易集成到需要的项目中去。

HTML代码

<div id="wrapper">
	<ul id="flip">
	  <li title="The first image" ><img src="1.png" /></li>
	  <li title="A second image" ><img src="2.png" /></li>
	  <li title="This is the description" ><img src="5.png" /></li>
	  <li title="Another description" ><img src="4.png" /></li>
	  <li title="A title for the image" ><img src="3.png" /></li>

	</ul>
	<div id="scrollbar"></div>
</div>

CSS代码

.ui-jcoverflip {
	position: relative;
}

.ui-jcoverflip--item {
	position: absolute;
	display: block;
}

/* Basic sample CSS */
#flip {
	height: 200px;
	width: 630px;
	margin-bottom: 50px;
}

#flip .ui-jcoverflip--title {
	position: absolute;
	bottom: -30px;
	width: 100%;
	text-align: center;
	color: #555;
}

#flip img {
	display: block;
	border: 0;
	outline: none;
}

#flip a {
	outline: none;
}

#wrapper {
	height: 300px;
	width: 630px;
	overflow: hidden;
	position: relative;
}

.ui-jcoverflip--item {
	cursor: pointer;
}

body {
	font-family: Arial, sans-serif;
	width: 630px;
	padding: 0;
	margin: 0;
}

ul,
ul li {
	margin: 0;
	padding: 0;
	display: block;
	list-style-type: none;
}

#scrollbar {
	position: absolute;
	left: 20px;
	right: 20px;
}

jQuery代码

jQuery( document ).ready( function(){
	jQuery( '#flip' ).jcoverflip({
	  current: 2,
	  beforeCss: function( el, container, offset ){
		return [
		  $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 210 - 110*offset + 20*offset )+'px', bottom: '20px' }, { } ),
		  $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,100-20*offset*offset) + 'px' }, {} )
		];
	  },
	  afterCss: function( el, container, offset ){
		return [
		  $.jcoverflip.animationElement( el, { left: ( container.width( )/2 + 110 + 110*offset )+'px', bottom: '20px' }, { } ),
		  $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,100-20*offset*offset) + 'px' }, {} )
		];
	  },
	  currentCss: function( el, container ){
		return [
		  $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 100 )+'px', bottom: 0 }, { } ),
		  $.jcoverflip.animationElement( el.find( 'img' ), { width: '200px' }, { } )
		];
	  },
	  change: function(event, ui){
		jQuery('#scrollbar').slider('value', ui.to*25);
	  }
	});

	jQuery('#scrollbar').slider({
	  value: 50,
	  stop: function(event, ui) {
		if(event.originalEvent) {
		  var newVal = Math.round(ui.value/25);
		  jQuery( '#flip' ).jcoverflip( 'current', newVal );
		  jQuery('#scrollbar').slider('value', newVal*25);
		}
	  }
	});
});

本文链接:http://www.codeceo.com/article/jquery-horizon-image-slider.html
本文作者:码农网 – 小峰
原创作品,转载必须在正文中标注并保留原文链接和作者等信息。]

发表我的评论

取消评论
表情 插代码

Hi,您需要填写昵称和邮箱!

  • 必填项
  • 必填项