jQuery图片切换插件gridSlide特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery图片切换插件gridSlide特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset=gb2312>
<title>jQuery图片切换插件gridSlide</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="gridslide.css" type="text/css">

</head>
<body>

<div class="slider">
	<ul data-title="Row 1">
		<li><img src="img/img1-1.jpg" alt="image"></li>
		<li><img src="img/img1-2.jpg" alt="image"></li>
		<li><img src="img/img1-3.jpg" alt="image"></li>
		<li><img src="img/img1-4.jpg" alt="image"></li>
		<li><img src="img/img1-5.jpg" alt="image"></li>
	</ul>
	<ul data-title="Row 2">
		<li><img src="img/img2-1.jpg" alt="image"></li>
		<li><img src="img/img2-2.jpg" alt="image"></li>
		<li><img src="img/img2-3.jpg" alt="image"></li>
		<li><img src="img/img2-4.jpg" alt="image"></li>
	</ul>
	<ul data-title="Row 3">
		<li><img src="img/img3-1.jpg" alt="image"></li>
		<li><img src="img/img3-2.jpg" alt="image"></li>
		<li><img src="img/img3-3.jpg" alt="image"></li>
	</ul>
</div>
<div id="slider-nav">
</div>
<script src="lib/jquery-1.10.2.js"></script>
<script src="gridSlide.js"></script>
<script>
$(window).load(function() {
	$('.slider').gridSlide({
		menu: 'grid',
		imgGrid: true,
		title: true,
		speed: 500
	});
});
</script>
</body>
</html>

JS代码(gridSlide.min.js):

if(typeof Object.create!=="function"){
	Object.create=function(e){
	function t(){
}
t.prototype=e;
	return new t}
}
(function(e,t,n,r){
	var s={
	init:function(t,n){
	var r=this;
	r.elem=n;
	r.$elem=e(n).css({
	overflow:"hidden"}
);
	r.options=e.extend({
}
,e.fn.gridSlide.options,t);
	r.$navigation=e(this.options.nav);
	r.list=r.$elem.find("ul");
	r.imgs=[];
	r.imgWidth=[];
	r.imgHeight=[];
	r.imgsLen=[];
	r.current=[0,0];
	for(i=0;
	i<r.list.length;
	i++){
	r.imgs[i]=e(r.list[i]).find("img");
	r.imgWidth[i]=r.imgs[i][0].width;
	r.imgHeight[i]=r.imgs[i][0].height;
	r.imgsLen[i]=r.imgs[i].length;
	e(r.list[i]).width(r.imgWidth[i]*r.imgsLen[i])}
if(r.options.menu==="grid"){
	r.buildGridNav(r.options.imgGrid)}
else if(r.options.menu==="nav"){
	r.buildNav()}
r.attachHandlers()}
,buildGridNav:function(t){
	this.gridText='<div class="grid"><div class="grid-nav">';
	for(i=0;
	i<this.list.length;
	i++){
	if(this.options.title){
	this.gridText+="<h3>"+e(this.list[i]).data("title")+"</h3>"}
this.gridText+='<ul class="grid-nav-layer">';
	for(j=0;
	j<this.imgs[i].length;
	j++){
	if(i===0&&j===0){
	this.gridText+='<li class="grid-nav-icon grid-active" data-x="'+j+'" data-y="'+i+'" >';
	if(t){
	this.gridText+='<img src="'+e(this.imgs[i][j]).attr("src")+'" alt="'+e(this.imgs[i][j]).attr("alt")+'" >'}
this.gridText+="</li>"}
else{
	this.gridText+='<li class="grid-nav-icon" data-x="'+j+'" data-y="'+i+'" >';
	if(t){
	this.gridText+='<img src="'+e(this.imgs[i][j]).attr("src")+'" alt="'+e(this.imgs[i][j]).attr("alt")+'" >'}
this.gridText+="</li>"}
}
this.gridText+="</ul>"}
this.gridText+="</div></div>";
	this.$navigation.show().prepend(this.gridText);
	this.$activeGridEl=e(".grid-active")}
,buildNav:function(){
	this.navText='<div class="nav-buttons"><a class="horizontal prev" data-dir="prev">Prev</a>';
	this.navText+='<a class="vertical up" data-dir="up">Up</a><a class="vertical down" data-dir="down">Down</a>';
	this.navText+='<a class="horizontal next" data-dir="next">Next</a></div>';
	this.$navigation.show().append(this.navText)}
,attachHandlers:function(){
	var t=this;
	if(t.options.menu==="grid"){
	e(".grid-nav-icon").on("click",function(){
	t.transition(e(this).data("x"),e(this).data("y"));
	t.$activeGridEl.removeClass("grid-active");
	t.$activeGridEl=e(this).addClass("grid-active")}
)}
else{
	e(".nav-buttons").find("a").on("click",function(){
	t.setCurrent(e(this).data("dir"));
	t.transition()}
)}
}
,setCurrent:function(e){
	if(e==="next"||e==="prev"){
	var t=this.current[0];
	t+=~~(e==="next")||-1;
	this.current[0]=t<0?this.imgsLen[this.current[1]]-1:t%this.imgsLen[this.current[1]]}
else{
	var n=this.current[1];
	n+=~~(e==="down")||-1;
	this.current[1]=n<0?this.list.length-1:n%this.list.length;
	if(this.current[0]>this.imgsLen[this.current[1]]-1){
	this.current[0]=this.imgsLen[this.current[1]]-1}
}
}
,transition:function(e,t){
	var n=this;
	if(e>=0&&t>=0){
	n.current[0]=e;
	n.current[1]=t}
n.list.stop().animate({
	"margin-left":-(n.current[0]*n.imgWidth[n.current[1]]),top:-(n.current[1]*n.imgHeight[n.current[1]])}
,this.options.speed)}
}
;
	e.fn.gridSlide=function(e){
	return this.each(function(){
	var t=Object.create(s);
	t.init(e,this)}
)}
;
	e.fn.gridSlide.options={
	nav:"#slider-nav",menu:"grid",title:false,imgGrid:false,speed:300}
}
)(jQuery,window,document)

CSS代码(gridslide.css):

.slider{width:600px;height:300px;overflow:scroll;}
.slider ul{position:relative;clear:both;list-style:none;padding:0;margin:0;}
.slider li{float:left;height:300px;}
.grid-nav{width:100%;}
h3{padding:5px;clear:both;}
.grid-nav ul{clear:both;}
.grid-nav-layer li{list-style:none;margin:1px;float:left;cursor:pointer;padding:6px;border:2px solid #a2a2a2;}
.grid-nav-layer li img{width:80px;height:40px;}
.grid-active{background-color:#c4c2c3;}

CSS代码(style.css):

body{width:600px;margin:100px auto 0;background-color:#fff;}
*{margin:0;padding:0;}
::selection{color:#000;}
#slider-nav{display:none;margin-top:1em;}
#slider-nav a{font-size:1.3em;padding:1em;margin-right:1em;border-radius:10px;cursor:pointer;}

附件:下载该文件资源,减少时间成本(增值服务)