当前位置: 乐呵网 > js学习网 > JavaScript特效 >

动感超强的JS图片轮换特效

时间:2016-10-11 14:31来源:乐呵网提供 作者:乐呵网 点击:
呱咚网,学编程,就上呱咚网,程序员网站,编程学习,新手编程入门!

<?xml version="1.0" encoding="gb2312"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns="" 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 id="eLore"> <div id="eLore_wrap">Loading...</div> </div> <script type="text/javascript"> //<[CDATA[ var eLore_wrap = document.getElementById('eLore_wrap'); var aImg = new Array('http://www.jb51.net/upload/112_jpg_thumb.jpg','http://www.jb51.net/upload/123_jpg_thumb.jpg','http://www.jb51.net/upload/112_jpg_thumb.jpg', 'http://www.jb51.net/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 class="eLore_out" style="right:0px; background:url(' + aImg[iA] + ') -680px top no-repeat;">H</div>\n'; } /* var sDiv = '<div 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需刷新才能执行]

(责任编辑:admin)
------分隔线----------------------------