分享一個代碼簡潔的Jquery slide show 圖片切換_圖片特效特效

網上有很多基于Jquery的slide show，效果很漂亮、功能也很全，但是如果要應用某種效果，就非得導入某個插件，而這些文件通常都不會太小，為個一個slide show就導入一個文件，覺得有點不值，所以自己寫了一個，分享出來，有用到的同學可以拿過去用用。
　　發現問題的同學請隨便嘀咕一下，只言片語也是對我的幫助，謝謝.....

<html>
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312">
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.4.2/jquery.min.js"></script>
<title>JavaScript slider</title>
</head>
<body>
<style>
	br {clear:both;}
	.frame {
		width:600px;
		height:240px;
		background-color:#CCC;
		overflow:hidden;
	}
	.frame .list {
		list-style:none;
		padding:0;
		margin:0;
		width:10000px;
	}
	.frame .list li {
		width:600px;
		height:240px;
		float:left;
	}
	.frame #big_list2 {
		height:10000px;
	}
	.frame #big_list2 li {
		clear:both;
	}
	.frame #big_list4 {
		height:10000px;
	}
	.frame #big_list4 li {
		clear:both;
	}
	
	.l_frame {
		width:260px;
		height:80px;
		background-color:#CCC;
		overflow:hidden;
		float:left;
	}
	.l_frame .list {
		list-style:none;
		padding:0;
		margin:0;
		width:10000px;
	}
	.l_frame .list li {
		float:left;
		width:76px;
		height:76px;
		cursor:pointer;
		border:solid 2px #cc3910;
	}
	.l_frame .list .cur {
		border:solid 2px #0FF;
	}
	.l_frame2 {
		height:208px;
		width:80px;
		background-color:#CCC;
		overflow:hidden;
	}
	.l_frame2 .list {
		list-style:none;
		padding:0;
		margin:0;
		height:10000px;
	}
	.l_frame2 .list li {
		width:76px;
		height:76px;
		cursor:pointer;
		border:solid 2px #cc3910;
	}
	.l_frame2 .list .cur {
		border:solid 2px #0FF;
	}
	
	
	.slide_nav {
		height:80px;
		width:16px;
		
		display:block;
		float:left;
		background-color:#2A0;
		text-indent:-10000px;
		
	}
	.slide_nav2 {
		width:80px;
		height:16px;
		display:block;
		background-color:#2A0;
		text-indent:-10000px;
		
	}
</style>
<h3>A、大圖：向左輪轉；小圖：向左輪轉</h3>
<div   class="xxfnr55"   id="big_frame" class="frame">
	<ul id="big_list" class="list">
		<li style="background-color:#332f29;">aaaa</li>
		<li style="background-color:#f1f2c0;">bb</li>
		<li style="background-color:#ccc59e;">cc</li>
		<li style="background-color:#8fa68e;">dd</li>
		<li style="background-color:#cc3910;">eeee</li>
	</ul>
</div>
<br />
<a id="back" class="slide_nav" href="#">left</a>
<div   class="5pfzdrh"   id="small_frame" class="l_frame">
	<ul id="small_list" class="list">
		<li id="hh5jnfv"    class="cur" style="background-color:#332f29;">aaaa</li>
		<li style="background-color:#f1f2c0;">bb</li>
		<li style="background-color:#ccc59e;">cc</li>
		<li style="background-color:#8fa68e;">dd</li>
		<li style="background-color:#cc3910;">eeee</li>
	</ul>
</div>
<a id="forward" class="slide_nav" href="#">right</a>
<br />
<br />
<br />
<br />
<h3>B、大圖：向上輪轉；小圖：向左輪轉</h3>
<div   class="trx7dth"   id="big_frame2" class="frame">
	<ul id="big_list2" class="list">
		<li style="background-color:#d57d50;">aaaa</li>
		<li style="background-color:#cc3910;">bb</li>
		<li style="background-color:#f1f2c0;">cc</li>
		<li style="background-color:#ccc59e;">dd</li>
		<li style="background-color:#8fa68e;">eeee</li>
		<li style="background-color:#332f29;">FFF</li>
	</ul>
</div>
<br />
<a id="back2" class="slide_nav" href="#">a</a>
<div   class="nzdvxjp"   id="small_frame2" class="l_frame">
	<ul id="small_list2" class="list">
		<li id="7h5f5f5"    class="cur" style="background-color:#d57d50;">aaaa</li>
		<li style="background-color:#cc3910;">bb</li>
		<li style="background-color:#f1f2c0;">cc</li>
		<li style="background-color:#ccc59e;">dd</li>
		<li style="background-color:#8fa68e;">eeee</li>
		<li style="background-color:#332f29;">FFF</li>
	</ul>
</div>
<a id="forward2" class="slide_nav" href="#">b</a>
<br />
<br />
<br />
<br />
<h3>C、大圖：向左輪轉；小圖：向上輪轉</h3>
<div style="float:left;">
	<div   class="lhnbfvx"   id="big_frame3" class="frame">
		<ul id="big_list3" class="list">
			<li style="background-color:#d57d50;">aaaa</li>
			<li style="background-color:#cc3910;">bb</li>
			<li style="background-color:#f1f2c0;">cc</li>
			<li style="background-color:#ccc59e;">dd</li>
			<li style="background-color:#8fa68e;">eeee</li>
			<li style="background-color:#332f29;">FFF</li>
		</ul>
	</div>
</div>
<div style="float:left; margin:0 0 0 8px;">
	<a id="back3" class="slide_nav2" href="#">a</a>
	<div   class="nlr5xnz"   id="small_frame3" class="l_frame2">
		<ul id="small_list3" class="list">
			<li id="75vxdt5"    class="cur" style="background-color:#d57d50;">aaaa</li>
			<li style="background-color:#cc3910;">bb</li>
			<li style="background-color:#f1f2c0;">cc</li>
			<li style="background-color:#ccc59e;">dd</li>
			<li style="background-color:#8fa68e;">eeee</li>
			<li style="background-color:#332f29;">FFF</li>
		</ul>
	</div>
	<a id="forward3" class="slide_nav2" href="#">b</a>
</div>
<br />
<br />
<br />
<br />
<h3>D、大圖：向上輪轉；小圖：向上輪轉</h3>
<div style="float:left;">
	<div   class="5zzflln"   id="big_frame4" class="frame">
		<ul id="big_list4" class="list">
			<li style="background-color:#d57d50;">aaaa</li>
			<li style="background-color:#cc3910;">bb</li>
			<li style="background-color:#f1f2c0;">cc</li>
			<li style="background-color:#ccc59e;">dd</li>
			<li style="background-color:#8fa68e;">eeee</li>
			<li style="background-color:#332f29;">FFF</li>
		</ul>
	</div>
</div>
<div style="float:left; margin:0 0 0 8px;">
	<a id="back4" class="slide_nav2" href="#">a</a>
	<div   class="lxpfr5d"   id="small_frame4" class="l_frame2">
		<ul id="small_list4" class="list">
			<li id="plvpfjt"    class="cur" style="background-color:#d57d50;">aaaa</li>
			<li style="background-color:#cc3910;">bb</li>
			<li style="background-color:#f1f2c0;">cc</li>
			<li style="background-color:#ccc59e;">dd</li>
			<li style="background-color:#8fa68e;">eeee</li>
			<li style="background-color:#332f29;">FFF</li>
		</ul>
	</div>
	<a id="forward4" class="slide_nav2" href="#">b</a>
</div>
<br />
<br />
<br />
<br />
</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>

所屬頻道：圖片特效特效/更新時間：2012-10-28

[收藏][報錯][返回列表]

相關圖片特效特效：

分享一個代碼簡潔的Jquery slide show 圖片切換_圖片特效特效

圖片特效特效Rss訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些