分享一个Jquery slide show，有用的同学可以拿过去用用 [复制链接]

wfzong　楼主

帖子: 19
体力: 100
威望: 0

发表于 2010-12-31 14:15:35 |显示全部楼层

网上有很多基于Jquery的slide show，效果很漂亮、功能也很全，但是如果要应用某种效果，就非得导入某个插件，而这些文件通常都不会太小，为个一个slide show就导入一个文件，觉得有点不值，所以自己写了一个，分享出来，有用到的同学可以拿过去用用。
发现问题的同学请随便嘀咕一下，只言片语也是对我的帮助，谢谢.....

由于引用了一个外部jquery.min.js，所以点击“运行代码”后可能要刷新一个才能看到效果

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<title>JavaScript slider</title>

</head>
<body>

</body>

</html>
<script type="text/javascript">

//初始化
function C_slider(frame,list,Lframe,Llist,forwardEle,backEle,scrollType,LscrollType,acitonType,autoInterval){
	this.frame = frame;
	this.list = list;
	this.Lframe = Lframe;
	this.Llist = Llist;
	this.forwardEle = forwardEle;
	this.backEle = backEle;
	this.scrollType = scrollType;
	this.LscrollType = LscrollType;
	this.acitonType = acitonType;
	this.autoInterval = autoInterval;
	
	this.slideLength = $("#"+this.Llist+" > li").length;//总的slider数量
	this.currentSlide = 0;
	this.FrameHeight = $("#"+this.frame).height();
	this.FrameWidth = $("#"+this.frame).width();
	this.lFrameHeight = $("#"+this.Lframe).height();
	this.lFrameWidth = $("#"+this.Lframe).width();
	this.lListHeight = $("#"+this.Llist+" >li").eq(0).outerHeight(true);
	this.lListWidth = $("#"+this.Llist+" >li").eq(0).outerWidth(true);
	
	var self = this;
	
	for(var i = 0; i<this.slideLength; i++) {
		$("#"+this.Llist+" > li").eq(i).data("index",i);
		$("#"+this.Llist+" > li").eq(i).bind(this.acitonType,function(){
			self.go($(this).data("index"));
		});
	};
	
	//给“上一个”、“下一个”按钮添加动作
	$("#"+this.forwardEle).bind('click',function(){
		self.forward();
		return false;
	});
	$("#"+this.backEle).bind('click',function(){
		self.back();
		return false;
	});
	
	//定论鼠标划过时，自动轮换的处理
	$("#"+this.frame+",#"+this.Lframe+",#"+this.forwardEle+",#"+this.backEle).bind('mouseover',function(){
		clearTimeout(self.autoExt);
	});
	
	$("#"+this.frame+",#"+this.Lframe+",#"+this.forwardEle+",#"+this.backEle).bind('mouseout',function(){
		clearTimeout(self.autoExt);
		self.autoExt = setTimeout(function(){
			self.extInterval();
		},self.autoInterval);
	});	
	
	
	//开始自动轮换
	this.autoExt = setTimeout(function(){
		self.extInterval();
	},this.autoInterval);
}

//执行运动
C_slider.prototype.go = function(index){
	this.currentSlide = index;
	if (this.scrollType == "left"){
		$("#"+this.list).animate({
			marginLeft: (-index*this.FrameWidth)+"px"
		}, {duration:600,queue:false}); 		
	} else if (this.scrollType == "top"){
		$("#"+this.list).animate({
			marginTop: (-index*this.FrameHeight)+"px"
		}, {duration:600,queue:false}); 		
	}
	
	$("#"+this.Llist+" > li").removeClass("cur");
	$("#"+this.Llist+" > li").eq(index).addClass("cur");
		
	//对于缩略图的滚动处理
	if(this.LscrollType == "left"){
		if(this.slideLength*this.lListWidth > this.lFrameWidth){
			var spaceWidth = (this.lFrameWidth - this.lListWidth)/2;
			var hiddenSpace = this.lListWidth*this.currentSlide - spaceWidth;
			
			if (hiddenSpace > 0){
				if(hiddenSpace+this.lFrameWidth <= this.slideLength*this.lListWidth){
					$("#"+this.Llist).animate({
						marginLeft: -hiddenSpace+"px"
					}, {duration:600,queue:false}); 
				} else {
					var endHidden = this.slideLength*this.lListWidth - this.lFrameWidth;
					$("#"+this.Llist).animate({
						marginLeft: -endHidden+"px"
					}, {duration:600,queue:false}); 
				}
			} else {
				$("#"+this.Llist).animate({
					marginLeft: "0px"
				}, {duration:600,queue:false}); 
			}
		}
		
	} else if (this.LscrollType == "top"){
		if(this.slideLength*this.lListHeight > this.lFrameHeight){
			var spaceHeight = (this.lFrameHeight - this.lListHeight)/2;
			var hiddenSpace = this.lListHeight*this.currentSlide - spaceHeight;
			
			if (hiddenSpace > 0){
				if(hiddenSpace+this.lFrameHeight <= this.slideLength*this.lListHeight){
					$("#"+this.Llist).animate({
						marginTop: -hiddenSpace+"px"
					}, {duration:600,queue:false}); 
				} else {
					var endHidden = this.slideLength*this.lListHeight - this.lFrameHeight;
					$("#"+this.Llist).animate({
						marginTop: -endHidden+"px"
					}, {duration:600,queue:false}); 
				}
			} else {
				$("#"+this.Llist).animate({
					marginTop: "0px"
				}, {duration:600,queue:false}); 
			}
		}
		
	}
	
}

//前进
C_slider.prototype.forward = function(){
	if(this.currentSlide<this.slideLength-1){
		this.currentSlide += 1;
		this.go(this.currentSlide);
	}else {
		this.currentSlide = 0;
		this.go(0);
	}
}

//后退
C_slider.prototype.back = function(){
	if(this.currentSlide>0){
		this.currentSlide -= 1;
		this.go(this.currentSlide);
	}else {
		this.currentSlide = this.slideLength-1;
		this.go(this.slideLength-1);
	}
}

//自动执行
C_slider.prototype.extInterval = function(){
	if(this.currentSlide<this.slideLength-1){
		this.currentSlide += 1;
		this.go(this.currentSlide);
	}else {
		this.currentSlide = 0;
		this.go(0);
	}
	
	var self = this;
	this.autoExt = setTimeout(function(){
		self.extInterval();
	},this.autoInterval);
}

//实例化对象 
var goSlide1 = new C_slider("big_frame","big_list","small_frame","small_list","forward","back","left","left","click",3000);
var goSlide2 = new C_slider("big_frame2","big_list2","small_frame2","small_list2","forward2","back2","top","left","click",5000);
var goSlide3 = new C_slider("big_frame3","big_list3","small_frame3","small_list3","forward3","back3","left","top","click",3000);
var goSlide4 = new C_slider("big_frame4","big_list4","small_frame4","small_list4","forward4","back4","top","top","click",2000);

</script>

提示：您可以先修改部分代码再运行

[ 本帖最后由 wfzong 于 2010-12-31 14:32 编辑 ]

		自动登录	找回密码
密码			注册

分享一个Jquery slide show，有用的同学可以拿过去用用 [复制链接]

回复 21# KarasCanvas 的帖子

回复 1# wfzong [楼主] 的帖子

浏览过的帖子

浏览过的版块