图片交替显示及鼠标滑过更换图片

最新推荐文章于 2023-11-20 16:00:00 发布

黎色癫狂

最新推荐文章于 2023-11-20 16:00:00 发布

阅读量2.7k

点赞数 1

分类专栏： CSS 文章标签：图片

本文链接：https://blog.csdn.net/facecrazy/article/details/51580807

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片交替显示及鼠标滑过更换图片</title>
</head>
<body>
    <!-- 鼠标滑过更换图片star -->
    <h1>鼠标滑过更换图片:</h1>
	<img border="0" src="http://hbimg.b0.upaiyun.com/57576941bed4143eb2643ee9f23c597b7f6b1b69180cc-Ct89Yv_sq320" name="b1" οnmοuseοver="mouseOver()" οnmοuseοut="mouseOut()" />
    <script type="text/javascript">
            function mouseOver(){
                 document.b1.src="http://hbimg.b0.upaiyun.com/a9adb8b7d90c1f0618a67875641d46d9ac761e081c7a8-hbx5Qh_sq320"
            }
            function mouseOut(){
                document.b1.src="http://hbimg.b0.upaiyun.com/57576941bed4143eb2643ee9f23c597b7f6b1b69180cc-Ct89Yv_sq320"
           }
    </script>
    <!-- 鼠标滑过更换图片 end -->

    <br>


    <!-- 交替显示图片 star -->
    <h1>交替显示图片：</h1>
    <img src="http://hbimg.b0.upaiyun.com/57576941bed4143eb2643ee9f23c597b7f6b1b69180cc-Ct89Yv_sq320" id="imgs" />
    <script language="javascript"> 
        setInterval(test,2000); 
        var array=new Array(); 
        var index=0; 
        var array= new Array("http://hbimg.b0.upaiyun.com/57576941bed4143eb2643ee9f23c597b7f6b1b69180cc-Ct89Yv_sq320","http://hbimg.b0.upaiyun.com/a9adb8b7d90c1f0618a67875641d46d9ac761e081c7a8-hbx5Qh_sq320"); 
        function test() 
        { var myimg=document.getElementById("imgs"); 
        if(index==array.length-1) 
        { index=0; }else{ index++; } 
        myimg.src=array[index]; 
        } 
    </script> 
 <!--  交替显示图片 end -->
</body>
</html>

黎色癫狂

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
图片交替显示及鼠标滑过更换图片

图片交替显示及鼠标滑过更换图片鼠标滑过更换图片: function mouseOver(){ document.b1.src="http://hbimg.b0.upaiyun.com/a9adb8b7d90c1f0618a67875641d46d9ac761e081c7a8-hbx5Qh_sq320"
复制链接

扫一扫

专栏目录