jquery图像幻灯片制作大小图片切换滚动展示



118 471 158



特效描述:jquery 图像幻灯片制作 大小图片切换滚动,jquery图像幻灯片制作多张图片切换展示,小图片滚动切换大图显示,大图切换小图片滚动的jQuery图片幻灯片效果。jQuery下载。

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

2. HTML代码

<div class="demo">
	<h1>jquery图像幻灯片制作大小图片切换查看展示<small>图片文件名要求:小图s128x96,大图s720x540</small></h1>
	<div id="preview">
		<div id="spec-n1">
			<div class="o-img">
				<img alt="" src="images/s720x540_XtDL7D3SY6QJGHzc.JPG" onerror="this.src='images/none_347.gif'"  />
			</div>
			<div class="switch">
				<a id="foward">&nbsp;</a>
				<a id="next">&nbsp;</a>
			</div>													
		</div><!--spec-n1 end-->
		<div id="spec-n5">
			<div id="spec-top" class="control disabled"></div>
			<div id="spec-bottom" class="control"></div>
			<div id="spec-list">
				<ul>
					<li class="curr"><img width="128" height="96" name="images/s128x96_XtDL7D3SY6QJGHzc.JPG" alt="宾得(PENTAX) K-5(DA 18-55mm F3.5-5.6 AL WR) 单反套机(黑色)"  title="皇后湾灯塔" src="images/s128x96_XtDL7D3SY6QJGHzc.JPG"/></li>
					<li><img width="128" height="96" name="images/s128x96_DV33SrtGF0EkrA3F.JPG" alt="宾得(PENTAX) K-5(DA 18-55mm F3.5-5.6 AL WR) 单反套机(黑色)"  title="白云之上" src="images/s128x96_DV33SrtGF0EkrA3F.JPG"/></li>
					<li><img width="128" height="96" name="images/s128x96_boiCqhjGmojNGguS.JPG" alt="宾得(PENTAX) K-5(DA 18-55mm F3.5-5.6 AL WR) 单反套机(黑色)"  title="大东海霞光" src="images/s128x96_boiCqhjGmojNGguS.JPG"/></li>
					<li><img width="128" height="96" name="images/s128x96_Gpsv0Kx15IEcJi7E.JPG" alt="宾得(PENTAX) K-5(DA 18-55mm F3.5-5.6 AL WR) 单反套机(黑色)"  title="皇后湾浅滩" src="images/s128x96_Gpsv0Kx15IEcJi7E.JPG"/></li>
					<li><img width="128" height="96" name="images/s128x96_Jku0EImlopNsh65J.JPG" alt="宾得(PENTAX) K-5(DA 18-55mm F3.5-5.6 AL WR) 单反套机(黑色)"  title="香水湾滩头" src="images/s128x96_Jku0EImlopNsh65J.JPG"/></li>															
				</ul>
			</div>
		</div><!--spec-n5 end-->
		<div id="intro">皇后湾灯塔</div>
	</div><!--preview end-->
</div><!--demo end-->
	<div class="thickdiv" style="display:none;"></div>
	<div class="thickbox" style="width:272px;height:90px;display:none;">
		<div style="width:250" class="thicktitle">
			<span>提示</span>
		</div>
		<div style="width:250px;height:40px;" id="" class="thickcon">已经到最后一张了!</div>
		<a class="thickclose" href="#">×</a>
	</div>											
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>						
<script type="text/javascript">
function closebox(){
	$(".thickdiv,.thickbox").hide();
}
$(".thickclose").bind("click",function(){
	$(".thickdiv,.thickbox").hide();
});
(function(a){a.fn.jdMarquee=function(h,b){if(typeof h=="function"){b=h;h={};}var j=a.extend({deriction:"up",speed:10,auto:false,width:null,height:null,step:1,control:false,_front:null,_back:null,_stop:null,_continue:null,wrapstyle:"",stay:5000,delay:20,dom:"div>ul>li".split(">"),mainTimer:null,subTimer:null,tag:false,convert:false,btn:null,disabled:"disabled",pos:{ojbect:null,clone:null}},h||{});var u=this.find(j.dom[1]);var e=this.find(j.dom[2]);var r;if(j.deriction=="up"||j.deriction=="down"){var l=u.eq(0).outerHeight();var c=j.step*e.eq(0).outerHeight();u.css({width:j.width+"px",overflow:"hidden"});}if(j.deriction=="left"||j.deriction=="right"){var n=e.length*e.eq(0).outerWidth();u.css({width:n+"px",overflow:"hidden"});var c=j.step*e.eq(0).outerWidth();}var o=function(){var s="<div style='position:relative;overflow:hidden;z-index:1;width:"+j.width+"px;height:"+j.height+"px;"+j.wrapstyle+"'></div>";u.css({position:"absolute",left:0,top:0}).wrap(s);j.pos.object=0;r=u.clone();u.after(r);switch(j.deriction){default:case"up":u.css({marginLeft:0,marginTop:0});r.css({marginLeft:0,marginTop:l+"px"});j.pos.clone=l;break;case"down":u.css({marginLeft:0,marginTop:0});r.css({marginLeft:0,marginTop:-l+"px"});j.pos.clone=-l;break;case"left":u.css({marginTop:0,marginLeft:0});r.css({marginTop:0,marginLeft:n+"px"});j.pos.clone=n;break;case"right":u.css({marginTop:0,marginLeft:0});r.css({marginTop:0,marginLeft:-n+"px"});j.pos.clone=-n;break;}if(j.auto){k();u.hover(function(){m(j.mainTimer);},function(){k();});r.hover(function(){m(j.mainTimer);},function(){k();});}if(b){b();}if(j.control){g();}};var k=function(s){m(j.mainTimer);j.stay=s?s:j.stay;j.mainTimer=setInterval(function(){t();},j.stay);};var t=function(){m(j.subTimer);j.subTimer=setInterval(function(){q();},j.delay);};var m=function(s){if(s!=null){clearInterval(s);}};var p=function(s){if(s){a(j._front).unbind("click");a(j._back).unbind("click");a(j._stop).unbind("click");a(j._continue).unbind("click");}else{g();}};var g=function(){if(j._front!=null){a(j._front).click(function(){a(j._front).addClass(j.disabled);p(true);m(j.mainTimer);j.convert=true;j.btn="front";t();if(!j.auto){j.tag=true;}f();});}if(j._back!=null){a(j._back).click(function(){a(j._back).addClass(j.disabled);p(true);m(j.mainTimer);j.convert=true;j.btn="back";t();if(!j.auto){j.tag=true;}f();});}if(j._stop!=null){a(j._stop).click(function(){m(j.mainTimer);});}if(j._continue!=null){a(j._continue).click(function(){k();});}};var f=function(){if(j.tag&&j.convert){j.convert=false;if(j.btn=="front"){if(j.deriction=="down"){j.deriction="up";}if(j.deriction=="right"){j.deriction="left";}}if(j.btn=="back"){if(j.deriction=="up"){j.deriction="down";}if(j.deriction=="left"){j.deriction="right";}}if(j.auto){k();}else{k(4*j.delay);}}};var d=function(w,v,s){if(s){m(j.subTimer);j.pos.object=w;j.pos.clone=v;j.tag=true;}else{j.tag=false;}if(j.tag){if(j.convert){f();}else{if(!j.auto){m(j.mainTimer);}}}if(j.deriction=="up"||j.deriction=="down"){u.css({marginTop:w+"px"});r.css({marginTop:v+"px"});}if(j.deriction=="left"||j.deriction=="right"){u.css({marginLeft:w+"px"});r.css({marginLeft:v+"px"});}};var q=function(){var v=(j.deriction=="up"||j.deriction=="down")?parseInt(u.get(0).style.marginTop):parseInt(u.get(0).style.marginLeft);var w=(j.deriction=="up"||j.deriction=="down")?parseInt(r.get(0).style.marginTop):parseInt(r.get(0).style.marginLeft);var x=Math.max(Math.abs(v-j.pos.object),Math.abs(w-j.pos.clone));var s=Math.ceil((c-x)/j.speed);switch(j.deriction){case"up":if(x==c){d(v,w,true);a(j._front).removeClass(j.disabled);p(false);}else{if(v<=-l){v=w+l;j.pos.object=v;}if(w<=-l){w=v+l;j.pos.clone=w;}d((v-s),(w-s));}break;case"down":if(x==c){d(v,w,true);a(j._back).removeClass(j.disabled);p(false);}else{if(v>=l){v=w-l;j.pos.object=v;}if(w>=l){w=v-l;j.pos.clone=w;}d((v+s),(w+s));}break;case"left":if(x==c){d(v,w,true);a(j._front).removeClass(j.disabled);p(false);}else{if(v<=-n){v=w+n;j.pos.object=v;}if(w<=-n){w=v+n;j.pos.clone=w;}d((v-s),(w-s));}break;case"right":if(x==c){d(v,w,true);a(j._back).removeClass(j.disabled);p(false);}else{if(v>=n){v=w-n;j.pos.object=v;}if(w>=n){w=v-n;j.pos.clone=w;}d((v+s),(w+s));}break;}};if(j.deriction=="up"||j.deriction=="down"){if(l>=j.height&&l>=j.step){o();}}if(j.deriction=="left"||j.deriction=="right"){if(n>=j.width&&n>=j.step){o();}}};})(jQuery);
(function(){
	var a={ 
		obj:$("#spec-list"),
		subobj:$("#spec-n1 img"),
		width:720,
		height:490,
		subheight:540,
		posi:function(){ 
			var h=a.subobj.attr("height");
			if(h<a.subheight&&h>0){
				a.subobj.css({ "margin-top":(a.subheight-h)/2})
			}else{
				a.subobj.css({ "margin-top":0 });
			}
		},
		images:function(){ 
			a.obj.find("img").bind("click",function(){ 
				var src=$(this).attr("src");
				var cont = $(this).attr("title");
				$("#intro").html(cont);
				$("#spec-n1 img").attr("src",src.replace("s128x96","s720x540"));
				a.posi();
				if($("#spec-list li").hasClass("curr")){
					$("#spec-list .curr").removeClass("curr")
					};
					$(this).parent().addClass("curr");
					var m=a.calculate.swith();   
					if(m[1]==0){ 
						$("#foward").addClass("disabled");
					}else{ 
						if(m[1]+1==m[0]){ 
						$("#next").addClass("disabled");
					}else{
						$("#foward").removeClass("disabled");	
						$("#next").removeClass("disabled");
					}
				}
			})
		},
		alpha:function(){ 
			var img=new Image();
			img=$("#spec-n1").find("img").eq(0).get(0);
			var appname = navigator.appName.toLowerCase();
			if(appname.indexOf("netscape") == -1){ 
				if(img.readyState == "complete"){ 
					a.posi();
				}
			}else{ 
				img.onload = function (){ 
					if(img.complete == true){ 
						a.posi();
					}
				}	
			}
		},
		calculate:{ 	
			swith:function(){ 
				var p=a.obj.find("li");
				var m=[];
				m[0]=p.length;
				m[1]=p.index($(".curr"));
				return m;	
			},
			roll:function(){ 
				var p=a.obj.find("ul");
				var m=[];
				m[0]=parseInt(p.css("margin-top"));
				m[1]=p.height();
				return m;
			}
		},
		swith:function(){ 
			$("#foward").bind("click",function(){ 
				var m=a.calculate.swith();
				var s=a.calculate.roll();
				if(m[1]>0){ 
					$("#next").removeClass("disabled");
					$("#spec-list .curr").removeClass("curr");
					var ob = a.obj.find("li").eq(m[1]-1).find("img");
					var src=ob.attr("name"); 
					var cont = ob.attr("title");
					$("#intro").html(cont);
					$("#spec-n1").find("img").attr("src",src.replace("s128x96","s720x540"));
					a.posi();
					a.obj.find("li").eq(m[1]-1).addClass("curr");
				};
				if(m[1]==1){ 
					$("#foward").addClass("disabled");
				};
				if(m[1]==0){ 
					$(".thickdiv,.thickbox").show();
					setTimeout(function(){ closebox();},1200)
				}
				if(m[1]>2&&s[0]<0){ 
					a.roll.next(1);
				}
			});
			$("#next").bind("click",function(){ 
				var m=a.calculate.swith();
				var s=a.calculate.roll();
				if(m[1]<m[0]-1){ 
					$("#foward").removeClass("disabled");
					$("#spec-list .curr").removeClass("curr");
					var ob = a.obj.find("li").eq(m[1]+1).find("img");
					var src= ob.attr("name"); 
					var cont = ob.attr("title");
					$("#intro").html(cont);
					$("#spec-n1").find("img").attr("src",src.replace("s128x96","s720x540"));
					a.posi();
					a.obj.find("li").eq(m[1]+1).addClass("curr");
				};
				if(m[1]+2==m[0]){ 
					$("#next").addClass("disabled")
				};
				if(m[1]+1==m[0]){ 
					$(".thickdiv,.thickbox").show();
					setTimeout(function(){ closebox();},1200)
				};
				if(m[1]>=2&&s[1]+s[0]>490){ 
					a.roll.foward(1);
				}
			})
		},
		list:function(){ 
			$("#spec-top").bind("click",function(){ 
				var m=a.calculate.roll();
				if(m[0]<0){ 
					a.roll.next(2);	
				}
			});
			$("#spec-bottom").bind("click",function(){ 
				var m=a.calculate.roll();
				if(m[1]+m[0]>490){ 
					a.roll.foward(2);	
				}
			});
		},
		roll:{ 
			foward:function(step){ 
				var m=a.calculate.roll();
				a.obj.find("ul").animate({ "marginTop":m[0]-125*step},100);
			},
			next:function(step){ 
				var m=a.calculate.roll();
				a.obj.find("ul").animate({ "marginTop":m[0]+125*step},100)		
			}	
		},
		init:function(){ 
			a.obj.jdMarquee({
				deriction:"up",
				width:134,
				height:490,
				step:1,
				speed:4,
				delay:10,
				control:false
			});
			a.obj.find("ul").eq(1).remove();
			var h=a.obj.find("li").length;
			a.obj.find("ul").css({ "height":h*125});
			a.images();
			a.swith();
			a.list();
			a.alpha();
		}
	}; 
	a.init();
})(jQuery)
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 滑动选项卡 滑动切换 滚动切换 滚动条切换 flash焦点图 flash幻灯片 flashbanner flash图片轮播 自动滚动图片轮播 弹出层拖动 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 焦点图 幻灯片 轮播图 bar焦点图 带标题的焦点图 滚动切换 滚动条切换 文字提示框 提示文字 带缩略图的幻灯片 图片切换 图片选项卡 图标选项卡 纯图片轮播 图片轮播

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到