层叠图片,图片切换效果

来源：互联网发布：淘宝925大促编辑：程序博客网时间：2024/04/29 15:48

< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GB18030">
        <title>Insert title here</title>
<style type="text/css">
   body > div > img {
    position:absolute;
    display:none;
   }
   body > div > div > img {
    width: 15px;
    height: 15px;
    border: 1px solid;
    cursor: pointer;
   }
   #div {
    border:1px solid;
    width:320px;
    height:320px;
   }
</style>
<script type="text/javascript">
   onload = function(){
    /*
     * 层叠图片,图片切换效果
     */
    var id = setInterval(changeImg, 1000);

    var div = document.getElementById("div");
    div.onmouseover = function(){
     clearInterval(id);
     id = null;
    }

    div.onmouseout = function(){
     if(id == null)   // 为了避免在没有经过onmouseover事件的时候先进入onmouseout, 这样会开启2个计时器
      id = setInterval(changeImg, 1000);
    }
   }

   //获取所有图片,将所有隐藏
   //显示其中一个
   var times = 0;
   function changeImg(){
    var imagesArr = document.images;
    for(var x = 0; x < 4; x++)
     imagesArr[x].style.display = "none";
    imagesArr[++times % 4].style.display = "block";
   }

   function showImg(index){
    var imgArr = document.images;
    for (var x = 0; x < 4; x++)
     imgArr[x].style.display = "none";
    imgArr[index].style.display = "block";
   }
</script>
    </head>
    <body>
     <div id="div">
      <img src="../img/唐笑.jpg" style="display:block">
      <img src="../img/杜德伟.jpg">
      <img src="../img/林俊杰.jpg">
      <img src="../img/萧亚轩.jpg">
   <div style=" position:absolute; z-index:1; margin-left:210px; margin-top:290px" >
    <img src="../img/1.JPG" onclick="showImg(0)">
    <img src="../img/2.JPG" onclick="showImg(1)">
    <img src="../img/3.JPG" onclick="showImg(2)">
    <img src="../img/4.JPG" onclick="showImg(3)">
   </div>
</div>
    </body>
</html>