!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">
body , ul {
margin:0px;
padding:0px;
}
ul {
list-style:none;
}
#photoPlayer {
width:510px;
height:255px;
overflow:hidden;
position:relative;
}
#photoPlayer_Img ul li {
float:left;
filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=5,Duration=2);
}
#photoPlayer_Button_bg , #photoPlayer_Button {
position:absolute;
bottom:0px;
left:0px;
height:30px;
width:510px;
}
#photoPlayer_Button_bg {
background-color:#000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;
}
#photoPlayer_Button ul {
display:inline-block;
margin-top:0px;
margin-left:275px;
}
#photoPlayer_Button ul li {
float:left;
width:25px;
height:25px;
line-height:25px;
text-align:center;
border:#900 2px solid;
background-color:#F60;
margin-right:10px;
font-size:16px;
font-family:"微软雅黑";
font-weight:bold;
color:#FFC;
cursor:pointer;
}
#photoPlayer_Button ul .now {
background-color:#690;
border:#660 2px solid;
}
</style>
<script language="javascript">
var nowNum = 0;
var delay = 2000;
var t;
function photoPlayer(){
var imgArr = document.getElementById("photoPlayer_Img").getElementsByTagName("li");
var buttonArr = document.getElementById("photoPlayer_Button").getElementsByTagName("li");
for(var i=0 ; i < buttonArr.length ; i++){
(function(k){
buttonArr[k].onmouseover = function(){
showNow(k);
window.clearTimeout(t);
}
buttonArr[k].onmouseout = function(){
nowNum = k;
photoPlayer();
}
})(i);
}
function showNow(n){
for(var i=0 ; i < buttonArr.length ; i ++){
if(i==n){
buttonArr[i].className = "now";
imgArr[i].style.display = "block";
opacityChange(imgArr[i]); //不要渐变可以直接注释掉这一行
}else{
buttonArr[i].className = "";
imgArr[i].style.display = "none";
}
}
nowNum++;
if(nowNum==6){
nowNum = 0;
}
}
//透明渐变,支持IE/FF,不支持Webkit
function opacityChange(imgLi){
var IEFF = navigator.userAgent.indexOf("MSIE")>0? 1: 0;
var i=1;
if(IEFF==0){//FF
(this.go1 = function(){//定义函数
imgLi.style.MozOpacity=i*0.025;
i++;
if(i==40){
return;
}
setTimeout(function(){this.go1();},50);
})();
}else{//IE
imgLi.filters[0].Apply();
imgLi.filters[0].Play();
}
}
showNow(nowNum);
t = window.setTimeout(photoPlayer,delay);
}
window.onload = function(){
photoPlayer();
}
</script>
</head>
<body>
<div id="photoPlayer">
<div id="photoPlayer_Img">
<ul>
<li><img src="Images/01.jpg" width="510" height="255"/></li>
<li style="display:none;"><img src="Images/02.jpg" width="510" height="255"/></li>
<li style="display:none;"><img src="Images/03.jpg" width="510" height="255"/></li>
<li style="display:none;"><img src="Images/04.jpg" width="510" height="255"/></li>
<li style="display:none;"><img src="Images/05.jpg" width="510" height="255"/></li>
<li style="display:none;"><img src="Images/06.jpg" width="510" height="255"/></li>
</ul>
</div>
<div id="photoPlayer_Button_bg"> </div>
<div id="photoPlayer_Button">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</div>
</body>
</html>