当当网首页js图片切换代码

作者:sky 点击:232 评论:1 发布时间:周三, 03/26/2014 - 14:45 所属分类:图像特效

当当网首页6屏js图片定时切换特效，这个图片切换特效兼容当前主流浏览器，直接修改一下套用即可。

<!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" /> <meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效网" /> <meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" /> <title>网页特效当当网首页js图片切换代码站长特效网欢迎您。</title> <style type="text/css"> /*公用部分*/ *{margin:0;padding:0} a{ text-decoration:none; color:#1a66b3; } a:hover{text-decoration:underline;color:#1a66b3;} img{border:0;} * ul,* ol,* li {list-style:none} /*轮转*/ .www_zzjs_net{ width:416px; height:198px; margin:100px; border:1px solid #c8c8c8; float:left; position:relative} /*轮转样式*/ .www_zzjs_net .main{overflow:hidden;height:198px;width:416px; display:block;} .www_zzjs_net .main img{display: block;*display:inline-block;_display:inline-block} .www_zzjs_net_dummy{ position:absolute; bottom:0; left:0; z-index:20;height:23px; width:416px;filter:alpha(opacity=30)}/*10-5-31 qsy修*/ .www_zzjs_net_num{ position:absolute; bottom:0; left:0; z-index:30; height:20px; width:407px; padding:2px 5px 0px 0px; text-align:right;} .www_zzjs_net_num ul{margin:0;padding:0;list-style-type:0;float:right;} .www_zzjs_net_num li{ display:block; float:left; padding-left:2px; width:19px; height:20px;cursor:pointer;} .www_zzjs_net_num span{ display:block; float:right; padding-left:5px;width:19px; height:20px}/*10-3-11 qsy修改*/ .www_zzjs_net_num a{ display:block; background:url(/img/bg_cycle_num.gif) no-repeat 0 0; font:bold 11px/11px Arial; color:#fff; text-align:center; width:19px; height:17px; padding-top:3px; *height:16px; *padding-top:4px} .www_zzjs_net_num a:hover{ text-decoration:none; background:url(/img/bg_cycle_num2.gif) no-repeat 0 0; color:#fff} .www_zzjs_net_num .nonce a{ background:url(/img/bg_cycle_num2.gif) no-repeat 0 0} </style> </head> <body> <a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>  <script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script> <div class="www_zzjs_net" id="__E"> <div class="www_zzjs_net_dummy"></div> <div class="www_zzjs_net_num" id="myTab_btns2"> <ul> <li class="nonce"><a href="#">1</a><li><a href="#">2</a><li><a href="#">3</a><li><a href="#">4</a><li><a href="#">5</a><li><a href="#">6</a> </ul> </div> <div class="main" id="main2"> <ul> <li><a href="http://www.zzjs.net" target="_blank"><img src="/img/e2_zhaoqian_100809_Ebanner.jpg" alt="90后e时代生活" width="416" height="198" /></a></li><li><a href="http://www.zzjs.net" target="_blank"><img src="/img/baihuo_bf100809_Ebanner.jpg" alt="百货全场全网最低" width="416" height="198"/></a></li><li><a href="http://www.zzjs.net" target="_blank"><img src="/img/E1_lyw_100809_Ebanner.jpg" alt="慢活族经典品味专区" width="416" height="198"/></a></li><li><a href="http://www.zzjs.net" target="_blank"><img src="/img/e_zhaoqian_100811_Ebanner.jpg" alt="清凉夏装号令天下" width="416" height="198"/></a></li><li><a href="http://www.zzjs.net" target="_blank"><img src="/img/E6_congzi100810_Ebanner.jpg" alt="外语考试云霄飞车" width="416" height="198"/></a></li> <li><a href="http://www.zzjs.net" target="_blank"><img src="/img/e4_lyw100809_Ebanner.jpg" alt="谁的青春有我狂" width="416" height="198"/></a></li> </ul><script language="javascript">var bannercount=5</SCRIPT> </div> </div> <script language="javascript"> var Ex=function (o){for(var k in o)this[k]=o[k];return this} var UI=function (id){return document.getElementById(id)} var UIs=function (tag){return Ex.call([],this.getElementsByTagName(tag))} var Each=function (a,fn){for(var i=0;i<a.length;i++)fn.call(a[i],i,a)} var dhooo=function (ini){ this.bind(ini,this); this.autoIndex=0; }; Ex.call(dhooo.prototype,{ bind:function (ini,me){ var dir=ini.dir=='top'?'scrollTop':'scrollLeft',pan=UI(ini.contentID); var start=function (o){ Each(ini.btns,function(){this.className=''}); o.className=ini.className; me.autoIndex=o.index; me.begin(o.index,pan,ini.len,dir); }; pan.onmouseover=function (){me.stop=true}; Each(ini.btns,function (i){ this.index=i; this.onmouseover=function (){me.stop=true;start(this)}; pan.onmouseout=this.onmouseout=function(){me.stop=false} }); var auto=function(){ if(!me.stop){ me.autoIndex=me.autoIndex==bannercount?0:++me.autoIndex; start(ini.btns[me.autoIndex]); }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 }; if(ini.auto)this.autoPlay=window.setInterval(auto,5000); } ,begin:function (i,o,len,dir){ var img=o.getElementsByTagName("li"); if(document.all) img[i].childNodes[0].childNodes[0].style.filter="alpha(opacity=0)"; else img[i].style.opacity=0.05; var diff=(i*len-o[dir])*1; o[dir]+=Math[diff>0?'ceil':'floor'](diff); var opacitynum=0; (function (me){ clearInterval(me.only); me.only=setInterval(function (){ opacitynum+=0.05; if(document.all) img[i].childNodes[0].childNodes[0].style.filter="alpha(opacity="+opacitynum*100+")"; else img[i].style.opacity=opacitynum; //欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 if(opacitynum>=1)clearInterval(me.only); },10) })(this) } }) if(!isIE_8()){ if(isIE_c()){ new dhooo({ btns:UIs.call(UI('myTab_btns2'),'LI') ,className:'nonce' ,contentID:'main2' ,len:202 ,dir:'top' ,auto:true }); }else{ new dhooo({ btns:UIs.call(UI('myTab_btns2'),'LI') ,className:'nonce' ,contentID:'main2' ,len:198 ,dir:'top' ,auto:true }); } }else{ //欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 new dhooo({ btns:UIs.call(UI('myTab_btns2'),'LI') ,className:'nonce' ,contentID:'main2' ,len:198 ,dir:'top' ,auto:true }); } function showhide_divU(showdivid,hidedivid){ if($(showdivid)!=null){ $(showdivid).style.display=""; if(showdivid=='guanzhu') $(showdivid+"_title").className="nonce"; else $(showdivid+"_title").className="other nonce"; } if($(hidedivid)!=null){ $(hidedivid).style.display="none"; if(hidedivid=='huodong') $(hidedivid+"_title").className="other"; else $(hidedivid+"_title").className=""; } } //ff兼容 function isIE_c(){ if(window.navigator.userAgent.toLowerCase().indexOf("msie 8.0")>1) return false; return window.navigator.userAgent.toLowerCase().indexOf("msie")>=1?true:false; } function isIE_8(){ if(window.navigator.userAgent.toLowerCase().indexOf("msie 8.0")>1) return true; else return false; } function scrollImg(){ var posX,posY; if (window.innerHeight) { posX = window.pageXOffset; posY = window.pageYOffset; } else if (document.documentElement && document.documentElement.scrollTop) { posX = document.documentElement.scrollLeft; posY = document.documentElement.scrollTop; } else if (document.body) { posX = document.body.scrollLeft; posY = document.body.scrollTop; } if(document.body.clientWidth>1024){ posX=970+((document.body.clientWidth-960)/2); }else{ posX=950+((document.body.clientWidth-960)/2); } var ad=$("feedback"); ad.style.top=(posY+100)+"px"; ad.style.left=(posX)+"px"; setTimeout("scrollImg()",100); } </script> </div> </body> </html>

提示：你可以先修改部分代码再运行。

顶一下

(2)

100%

踩一下

(0)

标签: