动感超强的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 id="eLore"> 
    <div id="eLore_wrap">Loading...</div> 
</div> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%2F%2F%3C%5BCDATA%5B%20%0D%0Avar%20eLore_wrap%20%3D%20document.getElementById('eLore_wrap')%3B%20%0D%0Avar%20aImg%20%3D%20new%20Array('http%3A%2F%2Fwww.glzy8.com%2Fupload%2F112_jpg_thumb.jpg'%2C'http%3A%2F%2Fwww.glzy8.com%2Fupload%2F123_jpg_thumb.jpg'%2C'http%3A%2F%2Fwww.glzy8.com%2Fupload%2F112_jpg_thumb.jpg'%2C%20'http%3A%2F%2Fwww.glzy8.com%2Fupload%2F123_jpg_thumb.jpg')%3B%20%0D%0Avar%20iImg%20%3D%200%3B%20%0D%0Avar%20iA%20%3D%200%3B%20%0D%0Awindow.onload%20%3D%20function()%20%7B%20%0D%0A%20%20%20%20eLore_createD()%3B%20%0D%0A%7D%20%0D%0Afunction%20eLore_createD()%20%7B%20%0D%0A%20%20%20%20if%20(iImg%3D%3D10)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20eLore_wrap.innerHTML%20%3D%20''%3B%20%0D%0A%20%20%20%20%20%20%20%20iImg%20%3D%200%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20if%20(iImg%3D%3D0)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20eLore_wrap.innerHTML%20%2B%3D%20'%3Cdiv%20class%3D%22eLore_out%22%20style%3D%22right%3A0px%3B%20background%3Aurl('%20%2B%20aImg%5BiA%5D%20%2B%20')%20-680px%20top%20no-repeat%3B%22%3EH%3C%2Fdiv%3E%5Cn'%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20%2F*%20%0D%0A%20%20%20%20var%20sDiv%20%3D%20'%3Cdiv%20class%3D%22eLore_img%22%20style%3D%22left%3A'%20%2B%20(720-iImg*80)%20%2B%20'px%3B%20background%3Aurl('%20%2B%20aImg%5BiA%5D%20%2B%20')%20-720px%20top%20no-repeat%3B%22%3E'%20%2B%20iImg%2B%2B%20%2B%20'%3C%2Fdiv%3E%5Cn'%3B%20%0D%0A%20%20%20%20eLore_wrap.innerHTML%20%2B%3D%20sDiv%3B%20%0D%0A%20%20%20%20*%2F%20%0D%0A%20%20%20%20var%20oDiv%20%3D%20document.createElement('div')%3B%20%0D%0A%20%20%20%20oDiv.className%20%3D%20'eLore_img'%3B%20%0D%0A%20%20%20%20oDiv.style.right%20%3D%20iImg*80%20%2B'px'%3B%20%0D%0A%20%20%20%20oDiv.style.background%20%3D%20'url('%20%2B%20aImg%5BiA%5D%20%2B%20')%20-720px%20top%20no-repeat'%3B%20%0D%0A%20%20%20%20%2F%2FoDiv.appendChild(document.createTextNode(iImg))%3B%20%0D%0A%20%20%20%20eLore_wrap.appendChild(oDiv)%3B%20%0D%0A%20%20%20%20iImg%2B%2B%3B%20%0D%0A%20%20%20%20eLore_move()%3B%20%0D%0A%7D%20%0D%0Afunction%20eLore_move()%7B%20%0D%0A%20%20%20%20var%20oDiv%20%3D%20eLore_wrap.getElementsByTagName('div')%3B%20%0D%0A%20%20%20%20for%20(var%20i%3D1%3B%20i%3CoDiv.length%3B%20i%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20iBgpx%20%3D%20parseInt(oDiv%5Bi%5D.style.backgroundPosition)%3B%20%0D%0A%20%20%20%20%20%20%20%20if%20(iBgpx%3Ci*80-760)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20iMovePx%20%3D%20Math.floor((760-i*80%2BiBgpx)%2F15)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20oDiv%5Bi%5D.style.backgroundPosition%20%3D%20iBgpx%20-%20iMovePx%20%2B%20'px%20top'%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20else%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20oDiv%5Bi%5D.style.backgroundPosition%20%3D%20'-'%20%2B%20(760-%20i*80)%20%2B%20'px%20top'%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20if%20(iImg%3C10)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20setTimeout('eLore_createD()'%2C'50')%3B%20%0D%0A%20%20%20%20%7D%20else%20if%20(parseInt(oDiv%5B10%5D.style.backgroundPosition)%3C40)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20setTimeout('eLore_move()'%2C'50')%3B%20%0D%0A%20%20%20%20%7D%20else%20%7B%20%0D%0A%20%20%20%20%20%20%20%20iA%20%3D%20%2B%2BiA%3D%3DaImg.length%20%3F%200%20%3A%20iA%3B%20%0D%0A%20%20%20%20%20%20%20%20setTimeout('eLore_createD()'%2C'2000')%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%2F%2F%5D%5D%3E%20%0D%0A%3C%2Fscript%3E"> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程