当前位置: 首页 > 循环幻灯

循环幻灯

浏览次数:921 次
发布日期:2013/12/17


查看文章介绍页

js

$.fn.slide=function(option){
	//初始声明
	var obj=$(this);
	obj.time=1;
	obj.speed=250;
	obj.width=300;
	obj.height=400;
	obj.left=0;
	obj.index=0;
	obj.list=$(obj).find('.slide_list');
	obj.a=$(obj.list).find('a');
	obj.btn=$(obj).find('.slide_btn');
	obj=$.extend(obj,option);	
	//方法
	obj.move=function(){
		$(obj).find('.slide_right').unbind();
		if(obj.index+1==obj.a.length){
			$(obj.list).append($(obj.a).eq(0).clone());
			$(obj.list).animate({left:obj.left-=obj.width},obj.speed,function(){
				$(obj.list).css('left',0);
				$(obj.list).find('a:last').remove();
				$(obj).find('.slide_right').bind("click",function(){
					obj.move();
				});
			});
			obj.left=0;
			obj.index=0;
			$(obj.btn).find('span').removeClass('hover');
			$(obj.btn).find('span').eq(obj.index).addClass('hover');
		}else{
			obj.index++;
			$(obj.btn).find('span').removeClass('hover');
			$(obj.btn).find('span').eq(obj.index).addClass('hover');
			$(obj.list).animate({left:obj.left-=obj.width},obj.speed,function(){
				$(obj).find('.slide_right').bind("click",function(){
					obj.move();
				});
			});
		};
	};	
	obj.moveleft=function(){
		$(obj).find('.slide_left').unbind();
		if(obj.index==0){
			$(obj.list).prepend($(obj.a).eq(obj.a.length-1).clone());
			$(obj.list).css('left',-obj.width);
			$(obj.list).animate({left:0},obj.speed,function(){
				$(obj.list).css('left',-obj.width*(obj.a.length-1));
				$(obj.list).find('a:first').remove();	
				$(obj).find('.slide_left').bind("click",function(){
					obj.moveleft();
				});	
			});
			obj.index=obj.a.length-1;
			obj.left=-obj.index*obj.width;
			$(obj.btn).find('span').removeClass('hover');
			$(obj.btn).find('span').eq(obj.index).addClass('hover');
		}else{
			obj.index--;
			$(obj.btn).find('span').removeClass('hover');
			$(obj.btn).find('span').eq(obj.index).addClass('hover');
			$(obj.list).animate({left:obj.left+=obj.width},obj.speed,function(){
				$(obj).find('.slide_left').bind("click",function(){
					obj.moveleft();
				});		
			});
		};
	};	
	obj.btn_move=function(obj1){
		var num=$(obj1).html()-1;
			if(num>obj.index){
				if(Math.abs(num-obj.index)==1){
					$(obj.btn).find('span').removeClass('hover');
					$(obj1).addClass('hover');
					obj.index=num-1;
					obj.move();
				}else{
					$(obj.btn).find('span').removeClass('hover');
					$(obj1).addClass('hover');
					$(obj.a).eq(obj.index).after($(obj.a).eq(num).clone());
					$(obj.list).animate({
						left:obj.left-=obj.width
						},obj.speed,function(){
							$(obj.list).css('left',-num*obj.width);
							$(obj.list).find('a').eq(obj.index+1).remove();
							obj.index=num;
							obj.left=$(obj.list).css('left').replace(/px/,'')-0;
						});
					};	
				}else if(num<obj.index){
					if(Math.abs(obj.index-num)==1){
						$(obj.btn).find('span').removeClass('hover');
						$(obj1).addClass('hover');
						obj.index=num+1;
						obj.moveleft();
					}else{
						$(obj.btn).find('span').removeClass('hover');
						$(obj1).addClass('hover');
						$(obj.a).eq(obj.index).before($(obj.a).eq(num).clone());
						$(obj.list).css('left',obj.left-=obj.width);
						$(obj.list).animate({
							left:obj.left+=obj.width
							},obj.speed,function(){
								$(obj.list).css('left',-num*obj.width);
								$(obj.list).find('a').eq(obj.index).remove();
								obj.index=num;obj.left=$(obj.list).css('left').replace(/px/,'')-0;
							})
						};
					};
				};
	obj.set=setInterval(obj.move,obj.time*1000);
	//初始化
	$(obj).find('.slide_right').css({'right':'0','top':(obj.height-$(obj).find('.slide_right').height())/2});
	$(obj).find('.slide_left').css({'left':'0','top':(obj.height-$(obj).find('.slide_left').height())/2});
	$(obj.list).css('width',obj.width*(obj.a.length+1));
	for(i=0;i<obj.a.length;i++){
		if(i==0){
			$(obj.btn).append(''+(i+1)+'');
		}else{
			$(obj.btn).append(''+(i+1)+'');
		};
	};
	//事件
	$(obj).find('.slide_right').click(function(){
		obj.move();
	});
	$(obj).find('.slide_left').click(function(){
		obj.moveleft();
	});
	$(obj).mouseenter(function(){
		clearInterval(obj.set);
		$(obj).find('.slide_right').fadeIn(250);
		$(obj).find('.slide_left').fadeIn(250);
	});
	$(obj).mouseleave(function(){
		obj.set=setInterval(obj.move,obj.time*1000);
		$(obj).find('.slide_right').fadeOut(250);
		$(obj).find('.slide_left').fadeOut(250);
	});
	$(obj.btn).find('span').mouseenter(function(){
		var now=$(this);
		obj.on=setTimeout(function(){obj.btn_move(now)},250);		
	});
	$(obj.btn).find('span').mouseleave(function(){
			clearTimeout(obj.on);
	});
	return this;
}

	
$(document).ready(function(){
	$('.slide').slide({width:500});
});

HTML

CSS

.slide{ width:500px; height:400px; overflow:hidden; position:relative;}
.slide_btn{ position:absolute; right:0; bottom:5px;}
.slide_btn span{ cursor:pointer; background:#666; color:#fff; width:16px; height:16px; font-size:12px; line-height:16px; display:block; text-align:center; float:left; margin:0 5px;}
.slide_btn span.hover{ background:#fff; color:#900;}
.slide_list{ position:absolute;}
.slide_list a{ float:left;}
.slide_right{ background:url(/js_work/xh_slide/img/sprite.png) -235px 0 no-repeat; width:37px; height:37px; position:absolute; cursor:pointer; display:none;}
.slide_left{background:url(/js_work/xh_slide/img/sprite.png) -198px 0 no-repeat; width:37px; height:37px; position:absolute; cursor:pointer; display:none;}
.slide1{ width:300px; height:200px;overflow:hidden; position:relative;}
.slide1 .slide_list a img{ width:300px; height:200px;}