ASP.NET javascript实现图片切换

最新推荐文章于 2022-03-25 11:45:56 发布

忧郁三角龙ଲ

最新推荐文章于 2022-03-25 11:45:56 发布

阅读量656

点赞数 2

分类专栏： ASP.NET

本文链接：https://blog.csdn.net/weixin_45894701/article/details/115418117

版权

JavaScript 图片轮播随机切换鼠标事件 DOM

关键词由CSDN通过智能技术生成

ASP.NET 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

①Default.aspx文件

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript">
        function showpic() {
            var r = Math.random();
            r = Math.ceil(r * 2);
            var pic = document.images[0].src;
            if (pic.indexOf(r + ".jpg", 0) != -1) {
                if (r == 2) {
                    r = 1;
                } else {
                    r++;
                }
                document.images[0].src = "images/" + r + ".jpg";

            }
        }
        var t = setInterval("showpic()", 500);    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <img alt="" src="images/1.jpg" onmouseover="clearInterval(t)" 
            onmouseout="t=setInterval('showpic()',1000);" 
            style="height: 182px; width: 153px"/>
    </div>
    </form>
</body>
</html>

②效果图
在这里插入图片描述

③说明：
Ⅰ.每隔一秒切换一次。
Ⅱ.鼠标移动到图片上，图片不切换。
Ⅲ.鼠标移开，图片继续切换。

忧郁三角龙ଲ

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
ASP.NET javascript实现图片切换

①Default.aspx文件<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html
复制链接

扫一扫

专栏目录