以下是 jQuery图像幻灯片大小图切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery图像幻灯片大小图切换</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.demo{width:900px;margin:20px auto;}
.demo h1{font-size:18px;height:28px;font-family:"微软雅黑","宋体";font-weight:normal;color:#3366cc;text-align:center;}
.demo h1 small{font-size:12px;font-style:normal;color:#5e5e5e;margin:0 0 0 20px;}
.thickdiv{display:none;position:fixed;top:0;left:0;z-index:10000001;width:100%;height:100%;background:#000;border:0;filter:alpha(opacity=15);opacity:.15;}
.thickbox{display:none;position:fixed;top:0;left:50%;z-index:10000002;overflow:hidden;padding:0 4px 4px 0;background:url(images/bg_shadow.gif) no-repeat -4px 0;margin-left:-175px;margin-top:180px;}
*html,*html body{background-image:url(about:blank);background-attachment:fixed;}
*html .thickbox{position:absolute;top:expression(eval(document.documentElement.scrollTop));}
.thicktitle{height:27px;padding:0 10px;border:solid #C4C4C4;border-width:1px 1px 0;background:#F3F3F3;line-height:27px;font-family:arial;font-size:14px;font-weight:bold;color:#333;}
.thickclose:link,.thickclose:visited{display:block;position:absolute;z-index:100000;top:7px;right:12px;overflow:hidden;width:15px;height:15px;background:url(images/bg_thickbox.gif) no-repeat 0 -18px;font-size:0;line-height:100px;}
.thickcon{overflow:auto;background:#fff;border:solid #C4C4C4;border-width:1px;padding:10px;}
*html .thickdiv{position:absolute;}
/*preview*/
#preview{width:876px;height:564px;margin:10px auto;border:1px solid #e6e6e6;padding:5px;zoom:1;overflow:hidden;}
#spec-n1{float:left;width:720px;height:540px;border:1px solid #e6e6e6;overflow:hidden;background:#f6f6f6;position:relative;z-index:5;zoom:1;}
#spec-n1 .o-img{width:720px;height:540px;text-align:center;}
#spec-n1 .switch{width:720px;height:540px;position:absolute;z-index:10;top:0;left:0;}
#spec-n1 img{max-width:720px;max-height:540px;_height:384px;}
#spec-n5{position:relative;float:right;width:134px;height:490px;padding:25px 0px;zoom:1}
#spec-list{width:134px;height:490px;overflow:hidden;}
#spec-list ul{height:490px;overflow:hidden;margin:0;}
#spec-list li{width:134px;height:125px;text-align:center;}
#spec-list img{padding:2px;border:1px solid #E8E8E8;}
#spec-list .curr img{padding:1px;border:2px solid #ffd300;}
#spec-n5 .control{position:absolute;width:134px;height:25px;background-repeat:no-repeat;cursor:pointer;}
#spec-top{top:-2px;background:url(images/icoin.png) 0 -30px;}
#spec-top.disabled{background-position:-85px -124px;}
#spec-bottom{bottom:-2px;background:url(images/icoin.png) -139px -30px;}
#spec-bottom.disabled{background-position:-139px -61px;}
#intro{float:left;width:720px;height:25px;line-height:25px;text-align:center;overflow:hidden;font-size:12px;}
#foward{display:block;width:360px;height:540px;float:left;cursor:url(images/foward.ico),pointer;background:#fff;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}
#foward.disabled,#next.disabled{cursor:default;}
#next{display:block;width:360px;height:540px;float:right;cursor:url(images/next.ico),pointer;background:#fff;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}
.thickcon{line-height:40px;text-align:center}
</style>
</head>
<body>
<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"> </a>
<a id="next"> </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" src="js/zzsc.js"></script>
</body>
</html>
JS代码(zzsc.js):
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)
分享到QQ
分享到微博
微信扫一扫
