HTML实现图片幻灯片切换源代码

来源：互联网发布：大智慧和同花顺知乎编辑：程序博客网时间：2024/06/04 18:45

!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>