我的第一个新闻切换代码
<!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=utf-8" />
<title>我的第一个新闻切换代码</title>
<style type="text/css">
*{padding:0px;margin:0px;}
.container{width:360px;height:240px;position:relative;}
#mycontainer ul li{float:left;display:inline;}
</style>
<script language="javascript" type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery-ui-min.js"></script>
<script language="javascript" type="text/javascript">
$(function()
{
var len = $("#mycontainer > ul > li").length;
$("#mycontainer > ul > li").each(function(j)
{
if(j!=0)
{
$("#mycontainer > ul > li").get(j).style.display="none";
}
}
);
var index=0;
$("#go").click(function()
{
var MyTime = setInterval(function(){
showimg(index)
index++;
if(index==len){index=0;}
} , 2000);
}
);
}
);
function showimg(i)
{
var animateway= new Array(["blind"],["clip"],["drop"],["explode"],["fold"],["puff"],["scale"],["slide"]);
if($("#mycontainer > ul > li").get(i).style.display=="none")
{
$("#mycontainer > ul > li").hide();
$("#mycontainer > ul > li").eq(i).show(animateway[Math.floor(Math.random() * animateway.length)]);
}
else
{
$("#mycontainer > ul > li").eq(i).hide(animateway[Math.floor(Math.random() * animateway.length)]);
}
}
</script>
</head>
<body>
<div style="height:240px;">
<div class="container" id="mycontainer">
<ul>
<li>
<img src="upload/20090108111909b8e32.jpg" /> </li>
<li>
<img src="upload/200901081103177fef4.jpg" /> </li>
<li>
<img src="upload/2009010810553732750.jpg" /> </li>
</ul>
</div>
</div>
<span id="tst">
</span>
<input type="button" name="Submit" value="动画开始" id="go"/>
</body>
</html>
总结：其实也没什么好总结，看到别人写心里也痒痒，效果虽然不怎么样，但也是自己亲手写的，随便温习一下javascript知识
浙公网安备 33010602011771号