提示：您可以先修改部分代碼再運行
<!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>javascript 仿Flash圖片幻燈轉場效果 </title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代碼加到<head>與</head>之間--><style type="text/css">body{background:#000; color:#fff;}img,a img{border:none;}a{text-decoration:none; color:#fff;}a:hover{text-decoration:underline; color:#fff;}.main{width:950px; height:1000px; padding:0 6px;}.fcnt{display:block; height:342px; width:764px; margin:10px auto; border:4px solid #222; position:relative; overflow:hidden;}.fcnt .mimg{float:left; width:610px; height:340px; overflow:hidden; border:1px solid #470304;}.fcnt .mimg div{display:none;}.mimg img{width:610px; height:340px;} .fcnt ul{float:right; width:152px; height:340px;}*html .fcnt ul{position:absolute; right:0; top:0; width:152px; height:340px;}.fcnt li{display:block; height:82px; width:150px; margin-bottom:5px; cursor:pointer; overflow:hidden;}.fcnt li img{width:150px; height:82px;filter:alpha(opacity=70); -moz-opacity:0.7; opacity:0.7;}.fcnt li.cur img{width:142px; height:75px; margin:4px 0 0 4px;filter:alpha(opacity=100); -moz-opacity:1; opacity:1;}#tri{position:absolute; top:0; right:2px; z-index:1000; width:155px; height:82px; cursor:pointer;}*html #tri {background:none;}.fcnt dl{position:absolute; bottom:1px; left:0px; width:611px; height:80px; display:none;}.fcnt dt{line-height:38px; text-align:center; font-size:22px; font-family:"黑體"; font-weight:900;}.fcnt dd{line-height:24px; text-align:center; font-size:14px;}*html .fcnt dl{background:none;}</style><script type="text/javascript" src="http://www.zzsky.cn/effect/images/jquery-1.2.6.pack.js"></script> <script type="text/javascript">/*JavaScript Document By Trance *Mail: trance2005@163.com *QQ: 397902738 *Date: 2008-11-24*/$(document).ready(function(){//投影片var j=1;var MyTime=false;var fot=200;//當前圖片消失時間var fin=300;//新圖片呈現時間var amt=300;//三角標誌滑動時間var speed=3000;//自動播放間隔var maxpic=4;//切換圖片個數 $("#ppt").find("li").each(function(i){ $("#ppt").find("li").eq(i).mouseover(function(){ var cur=$("#mpc").find("div:visible").prevAll().length; if(i!==cur){ j=i; $("#mpc").find("div:visible").fadeOut(fot,function(){ $("#mpc").find("div").eq(i).fadeIn(fin);}); $("#tri").animate({"top":i*87+"px"},amt,current(this,"li")); $("#ppt").find("dl:visible").slideUp(fot,function(){ $("#ppt").find("dl").eq(i).slideDown(fin);}); } }) })//標記當前 function current(ele,tag){ $(ele).addClass("cur").siblings(tag).removeClass("cur"); } //自動播放，不需要的話可以刪除這一段 $('#imgnav').hover(function(){ if(MyTime){ clearInterval(MyTime); } },function(){ MyTime = setInterval(function(){ $("#ppt").find("li").eq(j).mouseover(); j++; if(j==maxpic){j=0;} } , speed); }); //自動開始 var MyTime = setInterval(function(){ $("#ppt").find("li").eq(j).mouseover(); j++; if(j==maxpic){j=0;} } , speed);})</script></head><body>預覽效果時左下角會提示錯誤，而且看不到效果，重新整理一下就可以了；當然，在實際使用中，不會出現這樣的問題。<br><!--把下面代碼加到<body>與</body>之間--><div class="main"> <div class="fcnt" id="ppt"> <div class="mimg" id="mpc"> <div ></div> <div></div> <div></div> <div></div> </div> <dl > <dt>一、Merry Christmas! 聖誕快樂！</dt> <dd>大家聖誕快樂啊，平安夜祝福你，平安夜收到心儀的禮物，平安幸福！</dd> </dl> <dl> <dt>二、Merry Christmas! 聖誕快樂！</dt> <dd>大家聖誕快樂啊，平安夜祝福你，平安夜收到心儀的禮物，平安幸福！</dd> </dl> <dl> <dt>三、Merry Christmas! 聖誕快樂！</dt> <dd>大家聖誕快樂啊，平安夜祝福你，平安夜收到心儀的禮物，平安幸福！</dd> </dl> <dl> <dt>四、Merry Christmas! 聖誕快樂！</dt> <dd>大家聖誕快樂啊，平安夜祝福你，平安夜收到心儀的禮物，平安幸福！</dd> </dl> <div id="tri"></div> <ul> <li class="cur"></li> <li></li> <li></li> <li></li> </ul> </div></div></body></html>
提示：您可以先修改部分代碼再運行
