<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> jQuery 图片切换 Demo by http://www.Codefans.net </TITLE>
<meta charset="GB2312" http-equiv="Content-Type" content="text/html; charset=GB2312">
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="codefans.net">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript" src="jquery-1.2.1.pack.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
//定义图片数组
var imgUrl=new Array();
var imgLink=new Array();
var imgAlt=new Array();
imgUrl[1]='images/jiuzhaigou1.jpg';
imgLink[1]='http://www.codefans.net';
imgAlt[1]='九寨沟美景';
imgUrl[2]='images/jiuzhaigou2.jpg';
imgLink[2]='http://www.codefans.net';
imgAlt[2]='九寨沟美景';
imgUrl[3]='images/jiuzhaigou3.jpg';
imgLink[3]='http://www.codefans.net';
imgAlt[3]='九寨沟美景';
imgUrl[4]='images/jiuzhaigou4.jpg';
imgLink[4]='http://www.codefans.net';
imgAlt[4]='九寨沟美景';
var imgID=1; //定义一个图片序号
var timer1; //定义一个定时器
$(document).ready(function (){
$("#loading").hide(); //将loading信息隐藏
$("#imgTitle").html(createLinks()); //图片序号栏
changeImage(1); //显示第一张图片
});
var changeImage=function (imgID){
clearTimeout(timer1);
$('#myImg').animate({
opacity: 'toggle'
},"fast");
if (imgID>=imgUrl.length)
imgID=1;//如果图片超过定义的数量,就从头开始
$('#myImg').attr({'src':imgUrl[imgID],'alt':imgAlt[imgID]});
$('#imgLink').attr('href',imgLink[imgID]);
$('#myImg').animate({
opacity: 'toggle'
},"slow");
$("a.button").css({"background":"#000000"});
$('#link'+imgID).css({"background":"#FF6600"});
timer1=setTimeout('changeImage('+(imgID+1)+')',5000);
}
var createLinks=function (){
var linkHTML="";
//数字按钮代码开始
for(var i=1;i<=imgUrl.length-1;i++){
linkHTML+=('<a id="link'+i+'" href="javascript:changeImage('+i+')" class="button" style="cursor:hand">'+i+'</a>');
}
//alert(linkHTML);
return linkHTML;
//数字按钮代码结束
}
//-->
</SCRIPT>
<style type="text/css">
<!--
#imgTitle{width:480;top:-16px;height:18px}
#imgTitle {FILTER:ALPHA(opacity=70);position:relative;left:0px;text-align:right;overflow: hidden;}
.imgClass {border: 0px solid #000;}
.button {text-decoration: none;padding: 2px 7px;background: #7B7B63;margin: 0px;font: bold 9px sans-serif; border-left:#fff 1px solid;}
a.button, a.button:link, a.button:visited {font-family: sans-serif;text-decoration: none;color:#FFFFFF;background-color: #000000;}
-->
</style>
</HEAD>
<!--
┏━━━━━━━━━━━━━━━━━━━━━┓
┃ 源 码 爱 好 者 ┃
┣━━━━━━━━━━━━━━━━━━━━━┫
┃ ┃
┃ 提供源码发布与下载 ┃
┃ ┃
┃ http://www.codefans.net ┃
┃ ┃
┃ 互助、分享、提高 ┃
┗━━━━━━━━━━━━━━━━━━━━━┛
-->
<BODY topmargin=0 leftmargin=0 >
<div id="loading">Loading...</div>
<div id="imagesPanel">
<a id="imgLink" href="http://www.codefans.net"><img id="myImg" class="imgClass" src="images/jiuzhaigou1.jpg"></a>
<div id="imgTitle">
</div>
</div>
</BODY>
</HTML>