动感超强的JS图片轮换特效_图象特效-js教程-PHP中文网

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

WBOY

发布： 2016-05-16 19:03:33

原创

1096 人浏览过

<?xml version="1.0" encoding="gb2312"?> 
 
 
 
<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> 
 
 
<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</script>

\n'; } /* var sDiv = '

' + iImg++ + '

\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