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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 动感超强的JS图片轮换特效

Javascript: 用js实现终止浏览器对页面HTML的继续解析即停止解析兼容firefox; Auntion-TableSort国人写的一个javascript表格排序的东西; javascript实现二分查找法实现代码; 利用ASP发送和接收XML数据的处理方法与代码; 兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版; javascript之文本框输入四个数字自动加空格的脚本; 比较简单实用的使用正则三种版本的js去空格处理方法; 比较简洁的JavaScript 实时显示时间的脚本修正版; JavaScript检查表单是否为空的函数; window.open被浏览器拦截后的自定义提示效果代码; javascript跟随鼠标的文字带滚动效果; 让插入到 innerHTML 中的 script 跑起来的代码; Flash+XML滚动新闻代码无图片附源码下载; javascript(js) join函数使用方法介绍; 表格头固定而列可滚动的效果; document.designMode的功能与使用方法介绍; 精解window.setTimeout()&window.setInterval()使用方式与参数传递问题！; 用javascript实现的电信铁通（网通）自动跳转源代码; 用js查找法实现当前栏目的高亮显示的代码; javascript之鼠标拖动位置互换效果代码

No. « ‹ 86 87 88 89 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 438 ::

收藏到网摘: n/a

使用 JavaScript 创建可维护的幻灯片效果代码一个小型js框架myJSFrame附API使用帮助

非常不错的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('/upload/tech/20091012/20091012092251_82f2b308c3b01637c607ce05f52a2fed.jpg','/upload/tech/20091012/20091012092254_432aca3a1e345e339f35a30c8f65edce.jpg','/upload/tech/20091012/20091012092251_82f2b308c3b01637c607ce05f52a2fed.jpg', '/upload/tech/20091012/20091012092254_432aca3a1e345e339f35a30c8f65edce.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 全选提示:你可先修改部分代码,再按运行]

使用 JavaScript 创建可维护的幻灯片效果代码一个小型js框架myJSFrame附API使用帮助

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

评论 (0) All

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