软件开发培训班 >> 编程开发 >> JavaScript

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

　　本文标签：动感,超强,漂亮，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> 
<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>

技术文章快速查找

有关JavaScript的10个怪癖和秘密分享

JQuery一种取同级值的方式(比如你在GridView中)

“增强js程序代码的健壮性”之我见大量示例代码

Jquery easyUI 更新行示例

javascript跑马灯悬停放大效果实现代码

javascript根据像素点取位置示例

点击下载链接弹出页面实现代码

Js右下角视频广告代码(百度视窗)

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建