Asp.net图片滚动

最新推荐文章于 2014-07-25 21:37:00 发布

原创最新推荐文章于 2014-07-25 21:37:00 发布 · 2.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#asp.net #function #html #c# #div #ie

NET 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一个兼容火狐和IE浏览器的图片滚动效果实现方案。通过HTML和JavaScript代码，实现了图片的连续滚动显示，并且加入了鼠标悬停暂停滚动的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="图片滑动.aspx.cs" Inherits="ASP.net.图片滑动" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>滚动图片的效果（兼容火狐和IE）</title>
</head>
<body>
    
    <div id="jsweb8_cn_top" style="overflow: hidden; height:320; width:240;">
        <div id="jsweb8_cn_top1">
            <img src="Common/image/Balance.jpg">
            <img src="Common/image/love a.GIF">
            <img src="Common/image/love b.GIF">
            <img src="Common/image/love c.GIF">
            <img src="Common/image/爱的马路.JPG">
            <img src="Common/image/牵手.JPG">
        </div>
        <div id="jsweb8_cn_top2">
        </div>
    </div>

    <script>
var speed=20
jsweb8_cn_top2.innerHTML=jsweb8_cn_top1.innerHTML //克隆jsweb8_cn_top1为jsweb8_cn_top2
function Marquee1(){
//当滚动至jsweb8_cn_top1与jsweb8_cn_top2交界时
if(jsweb8_cn_top2.offsetTop-jsweb8_cn_top.scrollTop<=0)
jsweb8_cn_top.scrollTop-=jsweb8_cn_top1.offsetHeight //jsweb8_cn_top跳到最顶端
else{
jsweb8_cn_top.scrollTop++;
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
jsweb8_cn_top.onmouseover=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
jsweb8_cn_top.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
    </script>

    
    <p>
    </p>
</body>
</html>