简单的jQuery左右滚动相册插件

作者:norion时间:2012年6月21日评论次数:0 条

今天项目要求做一个带箭头的滚动相册,其实网上有很多插件都带有这种功能,例如jcarousel插件就是一个很不错的插件,但是追求精简的原则决定自己写一个,顺便码一些自己的博客,嘿嘿~~~

今天写的这个插件的copy jcarousel插件的原理,限定容器的宽度,然后用绝对定位定义容器的子元素,在控制按钮click的时候,直接改变left的值就实现了想要的效果,下面就分享一下我的插件,如有bug请以评论的形式反馈。

html代码:

<section id="bannerMain" class="fn-clear">
  <ul id="bannerShow-item" class="fn-clear">
    <li id="bannerShow-item1" class="on"><img src="templates/images/indexBanner1-item1.jpg" alt="" /></li>
    <li id="bannerShow-item2"><img src="templates/images/indexBanner1-item2.jpg" alt="" /></li>
    <li id="bannerShow-item3"><img src="templates/images/indexBanner1-item3.jpg" alt="" /></li>
    <li id="bannerShow-item4"><img src="templates/images/indexBanner1-item4.jpg" alt="" /></li>
  </ul>
  <div class='bannerShowBtn bannerShowBtn-left'></div>
  <div class='bannerShowBtn bannerShowBtn-right'></div>
</section>

css代码:

#bannerMain{width:1003px;height:755px;overflow:hidden;position:relative;}
	#bannerShow-item{height:755px;position:absolute;top:0}
		#bannerShow-item li{width:1003px;float:left;}
	.bannerShowBtn{width:24px;height:43px;position:absolute;top:356px;cursor:pointer;}
		.bannerShowBtn-left{left:0;background:url(../images/arrow-prev.png) no-repeat;}
		.bannerShowBtn-right{right:0;background:url(../images/arrow-next.png) no-repeat;}

jQuery插件代码:

(function($){
	/*******************************
	 * @name jQuery左右滚动相册插件v1.0
	 * @author norion
	 * @author blog http://zkeyword.com/
	 * @create 2012.06.20
	 * @可自由转载及使用,但请注明版权归属
	 *******************************/
	$.fn.filmstrip = function(_setting){
		_setting = $.extend({
			setWrap:null,
			setSpeed:0
		},_setting);

		//防止为空时出错
		if( this.length > 0 ){
			var _this       = this,
				_wrap       = jQuery(_setting.setWrap),
				_length     = _wrap.children().length,
				_wrapWidth  = _this.width(),
				_imgWidth   = - ( _length - 1 ) * _wrapWidth,//每按一次需要移动的距离
				_prev       = jQuery(".bannerShowBtn-left"),
				_next       = jQuery(".bannerShowBtn-right"),
				_speed      = _setting.setSpeed,
				_index      = 1;
			//点击操作
			_next.click(function(){
				if( _index == _length ){
					_wrap.stop(false,false).animate({left:"0px"},_speed);
					_index = 1;
				}else{
					_wrap.stop(false,false).animate({left:'-='+_wrapWidth+'px'},_speed);
					_index ++;
				}
			});
			_prev.click(function(){
				if( _index == 1 ){
					_wrap.stop(false,false).animate({left:_imgWidth+'px'},_speed);
					_index = _length;
				}else{
					_wrap.stop(false,false).animate({left:'+='+_wrapWidth+'px'},_speed);
					_index --;	
				}
			});
		}
	}
})(jQuery);

jQuery调用:

jQuery(function (jQuery) {
	jQuery('#bannerMain').filmstrip({
		setWrap:'#bannerShow-item',
		setSpeed:600
	});
});

标签:

上一篇: javascript判断浏览器userAgent

下一篇:解决a标签为空IE浏览器无法显示

相关文章

评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注