JQuery实现图片幻灯片效果

DBear · 发表于 2013-2-8 01:04:26

效果图：

source code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""><style type="text/css">li {list-style:none}#picStore{display:none;}.avs#picShow,.avs#picShow img{width:755px;height:388px;}.avs{position:relative;overflow:hidden;margin:0px;}.avs dt{position:absolute;}.avs#picShow dt a{display:block;height:350px;width:760px;position:absolute;top:0px;z-index:5;line-height:417px;}.avs#picShow dt a img{width:760px;height:300px;border:hidden;}.avs dd{position:absolute;line-height:12px;height:23px;width:297px;bottom:0px;_bottom:-1px;}.avs dd div{float:left;width:35px;height:14px;background:#324C6D;border:#CBCCCE 1px solid;text-align:center;font:10px Arial;padding-top:2px;margin-left:5px;cursor:pointer;color:#fff;}.avs dd ul{float:left;width:200px;}.avs dd ul li{width:14px;height:13px;line-height:10px;font:10px Arial;color:#fff;text-align:center;cursor:pointer;background:#324C6D;float:left;margin-left:4px;padding-top:1px;margin-top:3px;}.avs dd ul li.show{background:#324C6D;width:17px;height:15px;margin-top:0px;padding-top:2px;border:#ccc 1px solid;font-size:12px;font-weight:bold;}.aves td{padding:0px 3px;}</style><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">function slide_init(){ function pic_slide(source, target, time){ //取“stop”（“play”）标签var beg=$("#"+target+" dd div")[0]; //时钟对象var tm;//绑定主导航标签click事件beg.onclick=function(){ if(beg.check){beg.check=false;clearInterval(tm);beg.innerHTML="PLAY"; }else{beg.check=true;clearInterval(tm); xunhuan(); init(); beg.innerHTML="STOP"; }};//将标签置为选中beg.check=true;//取所有图片链接var pics=$("#"+source+" a");//取所有图片对象var bimgs=$("#"+source+" img");//初始化图片indexvar now=1;//创建新图片对象var vimg=new Image();//初始化为图片库首个对象vimg.src=bimgs[0].src;vimg.alt=bimgs[0].alt;//取图片显示区域的链接节点var ba=$("#"+target+" dt a")[0];ba.href=pics[0].href;ba.onfocus=function(){this.blur()}; //在dt中追加新建图片对象var bt=$("#"+target+" dt")[0];bt.appendChild(vimg);var curImg=$(bt).find("img")[1]; //取得图片导航控制区var nav =$("#"+target+" dd ul")[0];//根据图片数量生成导航项var len=pics.length;for(var i=0;i<len;i++){nav.innerHTML+="<li>"+(i+1)+"</li>";}//初始化第一项为“show”样式var nav_item=$(nav).children("li");nav_item[0].className="show";//定义导航项click绑定操作function pfn(i){nav_item.onclick=function(){ go(i); if(beg.check){ clearInterval(tm); init(); } else{ clearInterval(tm); }} };//执行导航项绑定操作for(var i=0;i<len;i++){pfn(i);} //定义图片跳转操作function go(n){ clearInterval(tm); now=n; xunhuan(); init();};function xunhuan(){ if(/*@cc_on!@*/false){ curImg.style.filter="progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,motion=forward)";curImg.filters[0].Apply(); curImg.filters[0].Play(duration=1); } //更新当前图片链接及图片src ba.href=pics[now].href; curImg.src=bimgs[now].src; curImg.alt=bimgs[now].alt; //更新导航控制选择项 for(var i=0;i<len;i++){ nav_item.className=""; } nav_item[now].className="show"; //更新下次显示图片下标 (now<len-1)?now++:now=0;};function init(){ tm=setInterval(xunhuan,time);};init(); }; pic_slide("picStore","picShow",3000);}</script></HEAD><BODY><div clickname="stickthread_5_data" id="picStore"><a href="http://www.yoka.com/fashion/starwear/2010/pic1122202684.shtml"> <img alt="经典外套" src="http://img03.taobaocdn.com/tps/i3/T1SV0SXilCXXXXXXXX-770-300.jpg"/></a><a href="http://advlog10.yoka.com/ad-24315.html"> <img src="http://img.alimama.cn/bcrm/adboard/picture/2010-11-22/101122110857581.jpg"/></a><a href="http://www.yoka.com/star/starwear/2010/pic1122202390.shtml"> <img alt="黄奕街头范潮包加身" src="http://img03.taobaocdn.com/tps/i3/T1EHNSXfxXXXXXXXXX-770-300.jpg"/></a></div><dl class="avs" id="picShow"> <dt> <a> <img src="http://images.yoka.com/pic/deco/2009/0318/a14.gif"/> </a> </dt> <dd> <div>STOP</div> <ul> </ul> </dd></dl><script type="text/javascript">jQuery(document).ready(slide_init);</script></BODY></HTML>
注意：执行前，请下载JQuery.js文件，放于此html文件同目录下。

		自动登录	找回密码
密码			立即注册