js 图片切换效果代码

<html xmlns="http://www.111cn.net/ 1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js 图片切换效果代码</title>
<script language="javascript教程">
n=2;
nw=100;
imgpics=imgpics.split('|');
imglinks=imglinks.split('|');
imgtexts=imgtexts.split('|');

document.write(
'<style type="text/css教程">' +
 '#player{ margin: 14px auto 3px; width:200px ;height:auto}' +
 '#player img { width:200px ; height:150px;margin: 0 auto 0px;}' +
 '#player .gray{background-color:#666666;}' +
 '#player .gray a{color:white;text-decoration:none;}' +
 '#player .gray a:hover{color:white;text-decoration:none;}' +
 '#player .dblack{background-color:#000033;}' +
 '#player .dblack a{color:white;text-decoration:none;}' +
 '#player .dblack a:hover{color:white;text-decoration:none;}' +
'</style>'
);
document.write(
'<div id="player">' +
'<div id="player_img">' +
 '<a id="imglink" href="" target="_blank"><img id="imgpic" src="" border=0 style="display:none; margin:0 auto"></a>' +
'</div>' +
'<div class="c" style="height:10px"></div><div id="imgtext" style="display:none;text-align:center;"></div></div>'
);

var do_transition;
var tcount = 14;

var garTransitions = new Array();
garTransitions[0] = "progid:DXImageTransform.Microsoft.RandomDissolve()";
garTransitions[1] = "progid:DXImageTransform.Microsoft.Iris(irisStyle='star', motion='out')";
garTransitions[2] = "progid:DXImageTransform.Microsoft.Stretch(stretchStyle='push')";
garTransitions[3] = "progid:DXImageTransform.Microsoft.Stretch(stretchStyle='pop')";
garTransitions[4] = "progid:DXImageTransform.Microsoft.Fade(duration=2,overlap=0)";
garTransitions[5] = "progid:DXImageTransform.Microsoft.GradientWipe(duration=2,gradientSize=0.25,motion=forward )";
garTransitions[6] = "progid:DXImageTransform.Microsoft.Wheel(duration=2,spokes=16)";
garTransitions[7] = "progid:DXImageTransform.Microsoft.RadialWipe(duration=2,wipeStyle=CLOCK)";
garTransitions[8] = "progid:DXImageTransform.Microsoft.RandomBars(Duration=1,orientation=vertical)";
garTransitions[9] = "progid:DXImageTransform.Microsoft.Blinds(Duration=1,bands=20)";
garTransitions[10]= "progid:DXImageTransform.Microsoft.Checkerboard(Duration=1,squaresX=20,squaresY=20)";
garTransitions[11]= "progid:DXImageTransform.Microsoft.Strips教程(Duration=1,motion=rightdown)";
garTransitions[12]= "progid:DXImageTransform.Microsoft.Slide(Duration=1,slideStyle=push)";
garTransitions[13]= "progid:DXImageTransform.Microsoft.Spiral(Duration=1,gridSizeX=40,gridSizeY=40)";

function showimg(n){
 if(imgpics[n]){
  if (document.all){
   do_transition = Math.floor(Math.random() * tcount);
   document.all.player.style.filter=garTransitions[do_transition];
   document.all.player.filters[0].Apply();   
  }

  document.getElementById("imgpic").style.display='';
  document.getElementById("imgpic").src=imgpics[n];
  document.getElementById("imglink").href=imglinks[n];
  if(imgtexts[n]){
   document.getElementById("imgtext").innerHTML='<a href="' + imglinks[n] + '" target="_blank"  class="a3"><b>' + imgtexts[n] + '</b></a>';
   document.getElementById("imgtext").style.display = "";
  }else{
   document.getElementById("imgtext").style.display = "none";
  }
  if (document.all) {   
   document.all.player.filters[0].Play();  
  }
 }
}
function changeimg(n){
 if (n>=imgnum){
  n=0;
 }
 showimg(n);
 n++;
 setTimeout('changeimg('+n+')',3000);
}

setTimeout('changeimg('+n+')',0);
showimg(n);
</script>
</head>

<body>
</body>
</html>

时间: 2024-10-03 02:47:52

js 图片切换效果代码的相关文章

js图片切换效果代码

提示:您可以先修改部分代码再运行 1 2 3 4 提示:您可以先修改部分代码再运行

21cn js图片切换效果代码

劲爆星闻 1 "+(i+1)+"   "); //--> 谢霆锋秀与柏芝甜蜜照 为免相机中的私密照外泄,霆锋将电脑交助手保管,并禁止记者拍照-- [全文]

js+div实现文字滚动和图片切换效果代码_javascript技巧

本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了,本效果实现了两种效果,Div切换,TAB切换,和文字滚动,鼠标移上后文字停止滚动,两种功能可任意剥离出来,这不影响代码使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-txt-pic-scroll-cha-style-codes

js鼠标点击图片切换效果代码分享_javascript技巧

本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不断切换效果. 运行效果图:                                      -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js鼠标点击图片切换效果代码如下 <hea

js带前后翻页的图片切换效果代码分享_javascript技巧

本文实例讲述了javascript带前后翻页的图片切换效果.分享给大家供大家参考.具体如下: 这是一款基于javascript带前后翻页的图片切换效果代码,实现过程很简单. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link href="css/css.css" rel="stylesheet" type=&qu

jquery的幻灯片图片切换效果代码分享_jquery

本文实例讲述了jquery的幻灯片图片切换效果.分享给大家供大家参考.具体如下: 这是一款基于jquery的幻灯片图片切换效果代码,有缩略图和标题,可以自定义标题. 运行效果图:     -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <LINK rel=stylesheet type=text/css href="css/lrtk.css&quo

jquery实现LED广告牌旋转系统图片切换效果代码分享_jquery

本文实例讲述了jquery实现LED广告牌旋转系统图片切换效果,分享给大家供大家参考.具体如下: js模拟路边巨大显示屏上广告切换效果,不得不相信js做到了,而且让你无话可说的逼真效果. LED广告显示器上图片切换效果,场景也类似,效果相当震撼看得我目瞪口呆,热爱特效的你可不要错过哈! 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery实现LED广告牌旋转

js图片切换特效代码

<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3c.org/tr/1999/rec-html401-19991224/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>js图片切换特效代码</titl

纯js实现背景图片切换效果代码_javascript技巧

html代码 复制代码 代码如下: <!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> <title>背景切