jQuery向上滚动的幻灯片的封装

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

项目上的自己写的幻灯片,感觉还是挺粗糙,还要自己添加数字按钮,感觉不太方便,若有好的意见,请评论形式反馈~

jQuery插件代码:

(function($){
	/*******************************
	 * @name 向上滚动的幻灯片v1.0
	 * @author norion
	 * @author blog http://zkeyword.com/
	 * @2012.05.29
	 * @可自由转载及使用,但请注明版权归属
	 *******************************/
	$.fn.slidesPic = function(Content,Btn){
		if( this.length >0 ){
			var timer      = null,
			$sliderContain = this,
			$ul            = $sliderContain.find(Content),
			$li            = $ul.children(),
			size           = $li.size(),
			height         = $li.eq(0).height(),
			lastLiH        = height*size,
			index          = 1,
			$btns          = $sliderContain.find(Btn).css({filter:'Alpha(opacity=70)'}).mouseover(function(){
				if(timer){
					clearInterval(timer);
				}
				index=jQuery(this).index();
				slider();
				timer = setInterval(slider, 3000);
			}),
			slider = function(){
				if(index === size){
					var t = $li.eq(0).css({position:"relative",top:lastLiH}),
					callback = function(){
						t.css({top:0});
						$ul.css({top:0});
					},
					myTop = -index*height,
					eq = index = 0;
				}else{
					var myTop = -index*height,
					callback='',
					eq = index;
				};
				$btns.removeClass("on").eq(eq).addClass('on');
				$ul.stop().animate({top:myTop},800,callback);
				index ++;
			};
			timer = setInterval(slider, 5000);
		}
	}
})(jQuery);

jQuery调用代码:

jQuery("#topBlock-img").slidesPic('#img-box','#img-box-btn li');

html代码:

<div id="topBlock-img">
<ul id="img-box">
<li><a href="/g/project.php?id=189" target="_blank"><img src='/g/wide/13322043864488.gif&amp;w=503&amp;h=250' /></a></li>
<li><a href="/g/project.php?id=189" target="_blank"><img src='/g/wide/13322043864488.gif&amp;w=503&amp;h=250' /></a></li>
<li><a href="/g/project.php?id=189" target="_blank"><img src='/g/wide/13322043864488.gif&amp;w=503&amp;h=250' /></a></li>
<li><a href="/g/project.php?id=189" target="_blank"><img src='/g/wide/13322043864488.gif&amp;w=503&amp;h=250' /></a></li>
</ul>
<ul id="img-box-btn">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>

css代码:

#topBlock-img{width:823px;height:250px;float:left;padding:0 15px 0 0;overflow:hidden;position:relative;}
	#img-box{position:absolute;top:0}
		#img-box li{height:250px}
	#img-box-btn{position:absolute;bottom:10px;right:25px;}
		#img-box-btn li{width:20px;height:20px;line-height:20px;text-align:center;float:left;margin:5px 5px 0 0;color:#fff;opacity:0.7;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;background:#888}
		#img-box-btn li.on{width:25px;height:25px;line-height:25px;background:#000;margin:0 5px 0 0}

标签:

上一篇: jQuery“遮罩弹窗封装 v1.0”的改进

下一篇:jQuery获取selected的选中后的值

相关文章

评论

发表评论

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