分享一个代码简洁的Jquery slide show 图片切换

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/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 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 id="small_frame" class="l_frame">
	<ul id="small_list" class="list">
		<li 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 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 id="small_frame2" class="l_frame">
	<ul id="small_list2" class="list">
		<li 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 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 id="small_frame3" class="l_frame2">
		<ul id="small_list3" class="list">
			<li 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 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 id="small_frame4" class="l_frame2">
		<ul id="small_list4" class="list">
			<li 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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

分享一个代码简洁的Jquery slide show 图片切换

分类

图片代码

描述

网上有很多基于Jquery的slide show，效果很漂亮、功能也很全，但是如果要应用某种效果，就非得导入某个插件，而这些文件通常都不会太小，为个一个slide show就导入一个文件，觉得有点不值，所以自己写了一个，分享出来，有用到的同学可以...