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

最新推荐文章于 2022-08-23 16:22:00 发布

原创最新推荐文章于 2022-08-23 16:22:00 发布 · 2.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#图片

CSS 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了使用HTML和JavaScript实现图片鼠标悬停切换效果及图片轮播功能的方法。通过简单的代码示例展示了如何让图片在鼠标悬停时切换，并如何定时自动轮播不同图片。

<!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" onmouseover="mouseOver()" onmouseout="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>