動感超強的JS圖片輪換特效

更新時間：2008年06月24日 08:38:40 作者：

非常不錯的js圖片輪換效果代碼，像柵欄一樣結合起來，然后顯示完整圖片，代碼相對也不錯

<?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> <title>動感超強的JS圖片特效_腳本之家</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="generator" content="editplus" /> <meta name="author" content="eLore" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <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:800px; height:339px;     background:#369; } #eLore .eLore_img {     position:absolute; top:0;     width:120px; height:339px;     overflow:hidden;     font-size:50px;     line-height:340px; } #eLore .eLore_out {     position:absolute; top:0;     width:120px; height:339px;     overflow:hidden;     font-size:10px;     line-height:340px; } </style> </head> <body> <div   class="5nt33bj"   id="eLore">     <div   class="vlj3lt3"   id="eLore_wrap">Loading...</div> </div> <script type="text/javascript"> //<[CDATA[ var eLore_wrap = document.getElementById('eLore_wrap'); var aImg = new Array('http://www.dhdzp.com/upload/112_jpg_thumb.jpg','http://www.dhdzp.com/upload/123_jpg_thumb.jpg','http://www.dhdzp.com/upload/112_jpg_thumb.jpg', 'http://www.dhdzp.com/upload/123_jpg_thumb.jpg'); var iImg = 0; var iA = 0; window.onload = function() {     eLore_createD(); } function eLore_createD() {     if (iImg==10) {         eLore_wrap.innerHTML = '';         iImg = 0;     }     if (iImg==0) {         eLore_wrap.innerHTML += '<div   id="z5ttjv3"   class="eLore_out" style="right:0px; background:url(' + aImg[iA] + ') -680px top no-repeat;">H</div>\n';     }     /*     var sDiv = '<div   id="vxvxrpj"   class="eLore_img" style="left:' + (720-iImg*80) + 'px; background:url(' + aImg[iA] + ') -720px top no-repeat;">' + iImg++ + '</div>\n';     eLore_wrap.innerHTML += sDiv;     */     var oDiv = document.createElement('div');     oDiv.className = 'eLore_img';     oDiv.style.right = iImg*80 +'px';     oDiv.style.background = 'url(' + aImg[iA] + ') -720px top no-repeat';     //oDiv.appendChild(document.createTextNode(iImg));     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*80-760) {             var iMovePx = Math.floor((760-i*80+iBgpx)/15);             oDiv[i].style.backgroundPosition = iBgpx - iMovePx + 'px top';         } else {             oDiv[i].style.backgroundPosition = '-' + (760- i*80) + 'px top';         }     }     if (iImg<10) {         setTimeout('eLore_createD()','50');     } else if (parseInt(oDiv[10].style.backgroundPosition)<40) {         setTimeout('eLore_move()','50');     } else {         iA = ++iA==aImg.length ? 0 : iA;         setTimeout('eLore_createD()','2000');     } } //]]> </script> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

比較方便的onMouseWheel縮放圖片效果
比較方便的onMouseWheel縮放圖片效果...
2006-09-09
常見JS效果之圖片減速度滾動實現(xiàn)代碼
圖片減速度滾動,一般用于產品的展示效果。作為前端，互聯(lián)網上一些常見效果都要嘗試去實現(xiàn)，不能因為公司用不到就不做。
2011-12-12
javascript 火狐(firefox)不顯示本地圖片問題解決
在Firefox一直不能用js做出圖片預覽的效果，下面這個即可解決，用替換的方法實現(xiàn)firefox支持得的路徑格式
2008-07-07
js 圖片輪播(5張圖片)
網上比較常見的用jquery實現(xiàn)的圖片輪播效果代碼。
2008-12-12
js實現(xiàn)運動logo圖片效果及運動元素對象sportBox使用方法
Js實現(xiàn)運動的圖片特效，兩個網站Logo快速運動類似顯示器屏保。借此練習運動元素對象sportBox的使用方法，需要了解的朋友可以參考下
2012-12-12
多瀏覽器兼容的qq圖片輪換效果javascript代碼
今日發(fā)現(xiàn)qq的圖片輪換效果代碼不錯，兼容多瀏覽器，測試了ie和firefox效果不錯
2008-06-06
JS旋轉圖片陣類
非常漂亮的旋轉圖片陳效果代碼，已封裝成類，方便調用
2008-09-09
用javascript實現(xiàn)圖片馬賽克后顯示并切換
用javascript實現(xiàn)圖片馬賽克后顯示并切換...
2007-04-04
多圖幻燈Pixelate馬賽克效果
多圖幻燈Pixelate馬賽克效果...
2006-12-12
List the Stored Procedures in a SQL Server database
List the Stored Procedures in a SQL Server database...
2007-06-06