層疊圖片,圖片切換效果 – JAVA編程語言程序開發技術文章

< !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 > p > img {
    position:absolute;
    display:none;
   }
   body > p > p > img {
    width: 15px;
    height: 15px;
    border: 1px solid;
    cursor: pointer;
   }
   #p {
    border:1px solid;
    width:320px;
    height:320px;
   }
  </style>
  <script type="text/javascript">
   onload = function(){
    /*
     * 層疊圖片,圖片切換效果

     */
    var id = setInterval(changeImg, 1000);
   
    var p = document.getElementById("p");
    p.onmouseover = function(){
     clearInterval(id);
     id = null;
    }
   
    p.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>
     <p id="p">
      <img src="../img/唐笑.jpg" style="display:block">
      <img src="../img/杜德偉.jpg">
      <img src="../img/林俊傑.jpg">
      <img src="../img/蕭亞軒.jpg">
   <p 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)">
   </p>
  </p>
    </body>
</html>

 

摘自  代俊建的專欄 

發佈留言