很酷js图片切换特效

作者:sky 点击:2299 评论:1 发布时间:周二, 10/14/2008 - 11:37 所属分类:图像特效

非常漂亮的js图片切换特效，带缓冲效果，很像flash图片切换特效。

<?xml version="1.0" encoding="gb2312"?> <!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" lang="gb2312"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效网" /> <meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" /> <title>很酷JS图片切换特效，sky整理收集</title> <style type="text/css"> * { margin:0; padding:0; } body { margin:5px auto; text-align:center; background:#f0f0f0; } img { margin:0; border:0; padding:0; } #eLore { position:relative; margin:0 auto; width:800px; height:339px; } #eLore_wrap { position:relative; margin:0 auto; overflow:hidden; width:400px; height:200px; background:#369; z-index:5; } #eLore .eLore_img { position:absolute; top:0; overflow:hidden; } #eLore .eLore_out { position:absolute; right:0; top:0; overflow:hidden; } </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 id="eLore"> <div id="eLore_wrap">Loading...</div> </div> <div id="debug"></div> <script type="text/javascript"> //<[CDATA[ var eLore_wrap = document.getElementById('eLore_wrap'); var iImg = 0; var iA = 0; var aImg = [ '/ad/1.gif', '/ad/2.gif', '/ad/3.gif', '/ad/4.gif' ]; var iImgWidth = 400, iImgHeight = 300; var iDivWidth = iImgWidth/10; eLore_wrap.style.width = 10*(Math.floor(iImgWidth/10)) + 'px'; eLore_wrap.style.height = iImgHeight + 'px'; eLore_createD(); function eLore_createD() { if (iImg==10) { eLore_wrap.innerHTML = ''; iImg = 0; } if (iImg==0) { var oDivOut = document.createElement('div'); oDivOut.className = 'eLore_out'; oDivOut.style.width = iDivWidth + 'px'; oDivOut.style.height = iImgHeight + 'px'; oDivOut.style.background = 'url(' + aImg[iA] + ') -' + parseInt(8.5*iDivWidth) + 'px top no-repeat'; eLore_wrap.appendChild(oDivOut); }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 var oDiv = document.createElement('div'); oDiv.className = 'eLore_img'; oDiv.style.right = iImg*iDivWidth +'px'; oDiv.style.width = 1.5*iDivWidth + 'px'; oDiv.style.height = iImgHeight + 'px'; oDiv.style.background = 'url(' + aImg[iA] + ') -' + 9*iDivWidth + 'px top no-repeat'; eLore_wrap.appendChild(oDiv); iImg++; eLore_move(); } function eLore_move(){ var oDiv = eLore_wrap.getElementsByTagName('div'); for (var i=1; i<oDiv.length; i++) { var iBgpx = parseInt(oDiv[i].style.backgroundPosition); if (iBgpx<i*iDivWidth-(iImgWidth-0.5*iDivWidth)) { var iMovePx = Math.floor((iImgWidth-0.5*iDivWidth-i*iDivWidth+iBgpx)/15); oDiv[i].style.backgroundPosition = iBgpx - iMovePx + 'px top'; } else { oDiv[i].style.backgroundPosition = ((i+0.5)*iDivWidth-iImgWidth) + 'px top'; } }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 //document.getElementById('debug').innerText = eLore_wrap.innerHTML; if (iImg<10) { setTimeout('eLore_createD()','60'); } else if (parseInt(oDiv[10].style.backgroundPosition)<0.5*iDivWidth) { setTimeout('eLore_move()','60'); } else { iA = ++iA==aImg.length ? 0 : iA; setTimeout('eLore_createD()','2000'); } } //]]> </script> </body> </html>

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

顶一下

(1)

100%

踩一下

(0)

标签: