<!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>picChange图片切换特效</title>
<link rel="stylesheet" type="text/css" href="picChange-style.css" />
<style type="text/css">
body
{
font:14px/1.6 Arial;
}
#pram
{
width:600px;
margin:0 auto;
margin-top:30px;
text-align:center;
border-top:1px solid #ddd;
}
#time
{
width:35px;
text-align:right;
}
</style>
</head>
<body>
<div id="win">
<ul id="picChange">
<li><img src="img/1.jpg" alt="" /></li>
<li><img src="img/2.jpg" alt="" /></li>
<li><img src="img/3.jpg" alt="" /></li>
<li><img src="img/4.jpg" alt="" /></li>
</ul>
</div>
<div id="pram">
<p style="background:#ccc;">代码示例：picChange("picChange",fade,500); //淡出效果</p>
<p id="show">当前模式：淡出效果，500毫秒。</p>
<label>切换效果：</label><select name="changeStyle" id="changeStyle">
<option value="fade" selected="selected">淡出效果</option>
<option value="move">移出效果</option>
<option value="none">直接切换效果</option>
</select><br /><br />
<label>切换时间：</label><input name="time" id="time" value="500"/> ms；
<label>方向（选移出时有效）：</label><select name="direction" id="direction">
<option value="up" selected="selected">上</option>
<option value="down">下</option>
<option value="left">左</option>
<option value="right">右</option>
</select><br /><br />
<input type="button" value="更改模式" onclick="func()"/><br /><br />
<a href="http://www.ilovespringna.com/">足迹偏右</a>
</div>
<script type="text/javascript" src="picChange-0.1.js"></script>
<script type="text/javascript">
//直接切换效果
//picChange("picChange");
//淡出效果
picChange("picChange",fade,500);
//向上移出效果
//picChange("picChange",move,500,"up");
//向下移出效果
//picChange("picChange",move,500,"down");
//向左移出效果
//picChange("picChange",move,500,"left");
//向右移出效果
//picChange("picChange",move,500,"right");
//以下为页面测试函数，并非picChange的使用方法，使用方法如上
function func(){
var my_time = document.getElementById("time").value;
var my_changeStyle = document.getElementById("changeStyle").value;
var my_direction = document.getElementById("direction").value;
//alert(my_time+" "+my_changeStyle+" "+my_direction);
if(my_changeStyle == "move")
picChange("picChange",move,my_time,my_direction);
else if(my_changeStyle == "fade")
picChange("picChange",fade,my_time);
else
picChange("picChange");
var tmpImg = document.getElementById("picChange").getElementsByTagName("img");
var tmpLength = tmpImg.length;
for(var n=0;n<tmpLength;n++)
{
tmpImg[n].style.top = "";
tmpImg[n].style.left = "";
}
var showText = "改变成功！当前模式：";
if(my_changeStyle == "move")
showText += "向"+document.getElementById("direction").options[document.getElementById("direction").selectedIndex].text+document.getElementById("changeStyle").options[document.getElementById("changeStyle").selectedIndex].text;
else
showText += document.getElementById("changeStyle").options[document.getElementById("changeStyle").selectedIndex].text;
showText += "，"+my_time+"毫秒";
document.getElementById("show").innerHTML = showText;
}
</script>
</body>
</html>
- 1
- 2
前往页