javascript中图片切换案例

最新推荐文章于 2022-08-15 20:44:53 发布

爱上python的猴子

最新推荐文章于 2022-08-15 20:44:53 发布

阅读量435

点赞数

本文链接：https://blog.csdn.net/ma20120607/article/details/43850525

版权

html/xml 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

图片切换案例一：

<html>
  <head>
   <title>图片切换</title>
   <script>
    var start=1;
    function show()
    {
       for(var i=1;i<=4;i++)
       {
           if(start==i)
           {
              document.getElementById("img"+start).style.display="block";
           }
           else
           {
              document.getElementById("img"+i).style.display="none";
            }
        }
        if(start<4)
        {
          start++;
         }
         else
         {
            start=1;
          }
         setTimeout("show()",1000); 
    }
   </script>
  </head>
  <body οnlοad="show()">
   <div id="img1" style="display:none"><img src="images/xs.jpg"/></div>
   <div id="img2" style="display:none"><img src="images/yh.jpg"/></div>
   <div id="img3" style="display:none"><img src="images/tq.jpg"/></div>
   <div id="img4"style="display:none"><img src="images/sz.jpg"/></div>
 </body>
</html>

图片切换案例二：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
    var curIndex = 0;
    //时间间隔 单位毫秒 
    var timeInterval = 1000;
    var arr = new Array();
    arr[0] = "1.jpg";
    arr[1] = "2.jpg";
    arr[2] = "3.jpg";
    arr[3] = "4.jpg";
    var timer = setInterval(changeImg, timeInterval);
    document.getElementById('showpic').onmouseover = document.getElementById('showpic').onmouseout = function (e) {
        e = e || window.event;
        if (e.type=='mouseover') clearInterval(timer);
        else timer = setInterval(changeImg, timeInterval);
    }
    function changeImg() {
        var obj = document.getElementById("showpic");
        if (curIndex == arr.length - 1) {
            curIndex = 0;
        }
        else {
            curIndex += 1;
        }
        obj.alt=obj.src = "img/" + arr[curIndex];
    }
</script>
</head>
<body>
<p><img src="img/1.jpg" width="427" height="219" id="showpic" alt="alt"/></p>
</body>
</html>