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

ttx9n · 发表于 2008-6-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> 
 
    Loading... 
 
<script type="text/javascript"> 
//<[CDATA[ 
var eLore_wrap = document.getElementById('eLore_wrap'); 
var aImg = new Array('//www.jb51.net/upload/112_jpg_thumb.jpg','//www.jb51.net/upload/123_jpg_thumb.jpg','//www.jb51.net/upload/112_jpg_thumb.jpg', '//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 += 'H\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<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需刷新才能执行]

5cf304mn2 · 发表于 2022-10-25 18:07:10

哦哦哦哦哦哦哦哦哦

8ayoqrpj · 发表于 2022-12-9 11:39:22

很好，谢谢分享

4k0mp7m · 发表于 2022-12-12 22:47:38

很不错的源码论坛

JosephSA · 发表于 2023-6-5 23:51:11

逛逛看看瞧瞧

bp5jgbcnt · 发表于 2023-8-1 15:32:56

1312315458748777

nwk53kbd · 发表于 2023-11-24 01:06:08

强烈支持楼主ing……

btbhs8t · 发表于 2024-4-3 04:04:51

谢谢您的分享！

3pjdk29w · 发表于 2024-4-30 12:18:52

很不错的玩意

qq303604905 · 发表于 2024-5-5 00:24:27

啦啦啦啦啦啦哈哈哈

账号		自动登录	找回密码
密码			立即注册

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

相关帖子