一款实用的JavaScript图片幻灯片代码
来源:广州中睿信息技术有限公司官网
发布时间:2012/10/21 23:25:16 编辑:admin 阅读 351
代码简介:很常见的一款基于JS的图片幻灯片切换特效,与其它幻灯片不同之处是这款代码带有渐变效果,给人的感觉很舒服,像一个相册播放器一样,你只用将图片按顺序命名存放到指定目录,它会自动检测并播放。代码

代码简介:

很常见的一款基于JS的图片幻灯片切换特效,与其它幻灯片不同之处是这款代码带有渐变效果,给人的感觉很舒服,像一个相册播放器一样,你只用将图片按顺序命名存放到指定目录,它会自动检测并播放。

代码内容:

View Code
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>一款实用的JavaScript图片幻灯片代码 - www.webdm.cn</title>
<style type="text/css">
<!--
body
{ font-size:12px;
}
input
{
border-right
: #7b9ebd 1px solid;
padding-right
: 2px;
border-top
: #7b9ebd 1px solid;
padding-left
: 2px;
font-size
: 12px;
filter
: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde);
border-left
: #7b9ebd 1px solid;
cursor
: hand;
color
: black;
padding-top
: 2px;
border-bottom
: #7b9ebd 1px solid;
}
.img
{
filter
:alpha(opacity=1,enabled=1) blendtrans(duration=1);
border
:1px solid #CCCCCC;
}
-->
</style>
<script language="javascript">
var l=0;
var sum=0;
var _c = 0;
var _i = 0;
var _v = 0;
var _l = 0;
var _fi = 0;
var _sf = 3000;
var _html = null;
var _image = null;
var _mycars= new Array();
var _w = new Array();
var _h = new Array();
var imgs=new Array();
var limg=new Array();
/* 渐变 */
function transImg(enable){
document.getElementById(
"showimg").filters.blendtrans.Apply();
document.getElementById(
"showimg").filters[0].enabled=enable;
document.getElementById(
"showimg").filters.blendtrans.Play();
}
/* 加载图片 */
function chk(){
l
--;
document.getElementById(
"rotatorPlayer").innerHTML='<img src='+limg[0].src+'><br><br>' + '照片已加载:' + parseInt

(((sum
-
l)
*100/sum)).toString() + '%'
if (l==0){
adRotator.play();
document.getElementById(
'stops').disabled='';
document.getElementById(
'next').disabled='';
}
}
if (document.images){
limg[
0]=new Image();
limg[
0].src="http://www.webdm.cn/images/loading.gif";
for(var i=0;i<10;i++)
{
imgs[i]
=new Image();
imgs[i].src
="http://www.webdm.cn/images/wall"+parseInt(i+1)+".jpg";
}
}
function adRotator() {}
function adRotator.add(p,w,h)
{
_mycars[_c]
= p;
_w[_c]
= w;
_h[_c]
= h;
_c
= _c + 1;
}
/* 播放配置 */
function adRotator.loads()
{
if (_i < _mycars.length && _l < 1)
{
_html
= '<img id="showimg" src="' + _mycars[_i] + '" width="' + _w[_i] + '" height="' + _h[_i] + '" class="img">'
if (_v < 1)
{
document.getElementById(
'image').value = _html + ',' + _i;
document.getElementById(
'rotatorPlayer').innerHTML = _html;
transImg(
0);
_i
= _i + 1;
document.getElementById(
'backs').disabled='';
transImg(
1);
transImg(
0);
window.setTimeout(
"adRotator.loads("+_i+")",_sf);
}
}
else
{
_html
= '<img id="showimg" src="' + _mycars[_i] + '" width="' + _w[_i] + '" height="' + _h[_i] + '" class="img">'
document.getElementById(
'image').value = _html + ',' + _i;
document.getElementById(
'rotatorPlayer').innerHTML = _html;
transImg(
0);
transImg(
1);
transImg(
0);
}
if (_i+1 >
联系我们CONTACT 扫一扫
愿景:成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳 Tel:020-38931912 务实 Pragmatic
广州:广州市天河区翰景路1号金星大厦18层中睿信息 Fax:020-38931912 专业 Professional
深圳:深圳市福田区车公庙有色金属大厦509~510 Tel:0755-25855012 诚信 Integrity
所有权声明:PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。
版权所有:广州中睿信息技术有限公司 粤ICP备13082838号-2