实现flash的图片切换效果【可以切换多个网页或者图片】

这个是得到改进后的代码,可以切换多个页面
需要完整代码的朋友可以留下email
如需再添加切换页面,只要按照下边代码部分的样式添加内容即可
切换导航td的id要顺序排
那个div的TOP为为上边一个div的Top加上div本身的高度:237

  1<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Service.aspx.cs" Inherits="Service" %>
  2
  3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4
  5<html xmlns="http://www.w3.org/1999/xhtml" >
  6<head runat="server">
  7    <title>我们的服务</title>
  8    <link href="Themes/default/css.css" rel="stylesheet" type="text/css" />
  9        <meta content="text/html; charset=gb2312" http-equiv="Content-Type">
 10    <style type="text/css" >
 11    <!--
 12    .tdBG
 13    {
 14        border: #cccccc 1px solid; 
 15        padding-right: 0px;
 16        padding-left: 0px; 
 17        padding-bottom: 5px; 
 18        padding-top: 5px; 
 19        background-color:#e6e6e6;
 20    }

 21     -->
 22    </style>
 23</head>
 24<body onload="iniautoslide()">
 25    <table align="center" cellpadding="0" cellspacing="0" width="100%">
 26    <tr>
 27    <td style="width:180px;">
 28    <img src="Images/mlogo.gif" alt="" border="0" style="width: 180px; height: 136px" />
 29    </td>
 30    <td>
 31    <ul>
 32    <li>进入市场的连锁通路</li>
 33        <li>有效处理公司库存</li>
 34        <li>新产品成功推广</li>
 35    </ul>
 36    </td>
 37    </tr>
 38        <tr>
 39        <td colspan="2" class="tdBG" onmouseout="iniautoslide();" onmouseover="clearInterval(interval01);"
 40         >
 41        <div style="width: 0px; position: relative; height: 0px">
 42            <div style="z-index: 10;">
 43                <table cellspacing="0" cellpadding="0">
 44                    <tbody>
 45                        <tr>
 46                            <td height="29" style="padding-left: 1px" width="24">
 47                                <img id="upbtn" alt="Last" height="28" onclick="slideup();clearInterval(interval01);"
 48                                    onfocus="this.blur()" src="images/scrollad_left.gif" style="cursor: pointer" width="24"></td>
 49                            <td height="2">
 50                            </td>
 51                            <td id="led1" class="NUM2" height="19">
 52                               1</td>
 53                            <td height="2">
 54                            </td>
 55                            <td id="led2" class="NUM1" height="19">
 56                                2</td>
 57                            <td height="2">
 58                            </td>
 59                            <td id="led3" class="NUM1" height="19">
 60                                3</td>
 61                            <td id="led4" class="NUM1" height="19">
 62                                4</td>

 63                            <td height="3">
 64                            </td>
 65                            <td height="29" style="padding-left: 1px">
 66                                <img id="downbtn" alt="Next" height="29" onclick="slidedown();clearInterval(interval01);"
 67                                    onfocus="this.blur()" src="images/scrollad_right.gif" style="cursor: pointer" width="24"></td>
 68                        </tr>
 69                    </tbody>
 70                </table>
 71            </div>
 72        </div>
 73        <div id="main" nowrap="" style="overflow: hidden; position: relative;
 74            height: 237px">
 75            <div id="f1" style="z-index: 10; left: 0px;  position: absolute; top: 0px;
 76                height: 237px">
 77                <iframe frameborder="0" height="250" marginheight="0" marginwidth="0" name="frame1"
 78                    noresize="" onload="checkdamie(1)" scrolling="no" src="01.htm" width="100%"></iframe>
 79            </div>
 80            <div id="f2" style="display: none; z-index: 10; left: 0px;  position: absolute;
 81                top: 237px; height: 237px">
 82                <iframe frameborder="0" height="250" marginheight="0" marginwidth="0" name="frame1"
 83                    noresize="" onload="checkdamie(2)" scrolling="no" src="02.htm" width="100%"></iframe>
 84            </div>
 85            <div id="f3" style="display: none; z-index: 10; left: 0px;  position: absolute;
 86                top: 474px; height: 237px">
 87                <iframe frameborder="0" height="250" marginheight="0" marginwidth="0" name="frame1"
 88                    noresize="" onload="checkdamie(3)" scrolling="no" src="03.htm" width="100%"></iframe>
 89            </div>
 90            <div id="f4" style="display: none; z-index: 10; left: 0px; position: absolute;
 91                top: 711px; height: 237px">
 92                <iframe frameborder="0" height="250" marginheight="0" marginwidth="0" name="frame1"
 93                    noresize="" οnlοad="checkdamie(4)" scrolling="no" src="04.htm" width="100%"></iframe>
 94            </div>
 95        </div>
 96        </td>
 97        </tr>
 98    </table>
 99
100 <script language="JavaScript">
101<!--
102var currentF=1;
103document.getElementById("upbtn").style.display="none";
104var mainobj = document.getElementById("main");
105var count=(mainobj!=null)?mainobj.children.length:0;
106//var count=4;
107//alert(count);
108var frameheight = 237;
109var scrolling=0;
110var speed = 20;
111var checkloaded=new Array();
112for(i=1;i<=count;i++){
113checkloaded[i]=0;
114}

115function checkdamie(n){
116    checkloaded[n]=1;
117    //alert(checkloaded[n])
118
119}

120function alertloading(sdirection){
121scrolling=0;
122if(sdirection == "down"){
123currentF--;
124}

125else{
126currentF++;
127}

128//alert("正在下载数据,请稍等");
129}

130
131function scrolldown(f){
132
133    if(f>1 && f<count)
134    {    //case 2:
135        if (mainobj.scrollTop>=(frameheight*(f-1)))
136        {
137            clearInterval(inter);
138            mainobj.scrollTop=(frameheight*(f-1));
139            scrolling=0;
140        }

141        else
142        {
143        mainobj.scrollTop+=speed;
144        }

145    }

146
147    if(f==count)
148    {
149        if (mainobj.scrollTop>=frameheight*(count-1))
150        {
151            mainobj.scrollTop=frameheight*(count-1);
152            clearInterval(inter);
153            scrolling=0;
154        }

155        else{mainobj.scrollTop+=speed;}
156    }

157}

158
159
160function scrollup(f){
161
162    if (f<count){
163    if (mainobj.scrollTop<=(frameheight*(f-1))){
164        clearInterval(inter1);
165        mainobj.scrollTop=(frameheight*(f-1));
166        scrolling=0;
167        }

168    else{
169    mainobj.scrollTop-=speed;
170    }

171    }

172
173    if(f==count)
174    if (mainobj.scrollTop<=(frameheight(count-1))){
175        mainobj.scrollTop=(frameheight(count-1));
176        clearInterval(inter1);
177        scrolling=0;
178        }

179    else{
180    mainobj.scrollTop-=speed;
181    }

182}

183
184function slidedown(){
185    //slide
186if (scrolling==0){
187    scrolling=1;
188    currentF++;
189    obj=eval("document.getElementById('f"+currentF+"')");
190    obj.style.display="block";
191    if (checkloaded[currentF]==1){
192        inter=eval("setInterval('scrolldown("+currentF+")',5)");
193        //led
194        document.getElementById("upbtn").style.display="";
195        if (currentF==(count)){
196        document.getElementById("downbtn").style.display="none";
197        }

198        for (i=1;i<=count;i++)
199        {
200            var tpobj=eval("document.getElementById('led"+i+"')");
201            if(i==currentF)
202                tpobj.className='NUM2';
203            else
204                tpobj.className=(tpobj.className=='NUM2')?'NUM1':tpobj.className;
205        }

206    }

207    else{
208    alertloading("down");
209    
210    }

211    }

212}

213
214
215function slideup(){
216    //slide
217if (scrolling==0)
218{
219    scrolling=1;
220    currentF--;
221    obj=eval("document.getElementById('f"+currentF+"')");
222    obj.style.display="block";
223        if (checkloaded[currentF]==1){
224        inter1=eval("setInterval('scrollup("+currentF+")',5)");
225        //led
226        document.getElementById("downbtn").style.display="";
227        if (currentF==1){
228        document.getElementById("upbtn").style.display="none";
229        }

230        for (i=1;i<=count;i++)
231        {
232            if(i==currentF)
233                eval("document.getElementById('led"+currentF+"').className='NUM2'");
234            else
235                eval("document.getElementById('led"+i+"').className='NUM1'");
236        }

237        }

238        else{
239        alertloading("up");
240        }

241    }

242}

243//auto slide
244var direction = "down";
245var interval01;
246var autotime = 3000;
247function autoslide(){
248    if(direction == "down"){
249        if (currentF == (count-1)){
250         direction = "up";
251        }

252    slidedown();
253    }

254    if(direction == "up"){
255        if (currentF == 2){
256         direction = "down";
257        }

258    slideup();
259    }

260    
261}

262function iniautoslide(){
263interval01 = setInterval("autoslide()",autotime);
264}

265
266//-->
267 </script>
268
269</body>
270</html>
271

转载于:https://www.cnblogs.com/neilvension/archive/2008/03/02/1088164.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/363795.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《SpringMVC从入门到放肆》三、DispatcherServlet的url-pattern配置详解

上一篇我们详细解释了一下SrpingMVC的执行流程以及一些默认的配置&#xff0c;在Spring的思想中&#xff0c;就是默认大于配置。今天我们来详细的研究一下DispatcherServlet的url-pattern配置。 一、DispatcherServlet的url-pattern配置在没有特别要求的情况下&#xff0c;Spri…

vc中怎么使用SendMessage自定义消息函数

vc中怎么使用SendMessage自定义消息函数&#xff1a; SendMessage的基本结构如下&#xff1a; SendMessage( HWND hWnd, //消息传递的目标窗口或线程的句柄。 UINT Msg, //消息类别&#xff08;这里可以是一些系统消息&#xff0c;也可以是自己定义&#xff0c;下文具…

多路复用IO和异步IO

多路复用I/O 它的基本原理就是select/epoll这个function会不断的轮询所负责的所有socket&#xff0c;当某个socket有数据到达了&#xff0c;就通知用户进程。 流程图如下&#xff1a; 当用户进程调用了select&#xff0c;那么整个进程会被block&#xff0c;而同时&#xff0c…

Java开发人员应该知道的7种新工具

通过快速浏览一些最新的创新工具&#xff0c;随时准备锁定和加载。 万一您错过了它&#xff0c;RebelLabs最近发布了Java工具和技术前景的全球调查结果 。 除了著名的工具和成熟的工具外&#xff0c;市场还涌现出鲜有人知的新鲜工具和框架。 在这篇文章中&#xff0c;我决定收集…

leetcode-92-反转链表②

题目描述&#xff1a; 方法一: class Solution:def reverseBetween(self, head: ListNode, m: int, n: int) -> ListNode:dummy ListNode(0)dummy.next headpre dummyfor i in range(m-1):pre pre.nextstart pre.nexttrail start.nextfor i in range(n-m):start.next …

linux 7 services设定,CENTOS/RHEL7系统中设置SYSTEMD SERVICE的ULIMIT资源限制

8种机械键盘轴体对比本人程序员&#xff0c;要买一个写代码的键盘&#xff0c;请问红轴和茶轴怎么选&#xff1f;在bash中&#xff0c;有个ulimit命令&#xff0c;提供了对shell及该shell启动的进程的可用资源控制。主要包括打开文档描述符数量、用户的最大进程数量、coredump文…

ON_COMMAND_RANGE用法

afx_msg voidOnOutPutStatusButtonUp (WPARAM wParam, LPARAM lParam);BEGIN_MESSAGE_MAP(CIOStatue, CDialog)//{{AFX_MSG_MAP(CIOStatue)//}}AFX_MSG_MAPON_COMMAND_RANGE(IDC_STATIC_OUT1,IDC_STATIC_OUT16,OnOutPutStatusButtonUp)END_MESSAGE_MAP()//注意IDC_STATIC_OUT1…

在c语言中a 这条语句的作用,C语言复习第二章

C语言第二章C语言复习(第二章)一、填空1、若采用十进制数的表示形式&#xff0c;则077为( )&#xff0c;0111为( )&#xff0c;0xab为( )。 2、C语言中的标识符只能由3种字符组成&#xff0c;它们是( )、( )和( )。 3、在C语言中&#xff0c;用“\\”开头的字符序列称为转义字符…

自定义控件中使用Render的writer

给自定义控件一个模板并输出&#xff0c;可以在重写控件的Render&#xff0c;并使用它的HtmlTextWriter writer例如&#xff1a;publicclassMyTextBox : TextBox { private string _template"<tr><td> {0} </td><td> {1} </td>&l…

【ABAP系列】SAP 面试 ABAPer的一些感想

公众号&#xff1a;SAP Technical本文作者&#xff1a;matinal原文出处&#xff1a;http://www.cnblogs.com/SAPmatinal/ 原文链接&#xff1a;【ABAP系列】SAP 面试 ABAPer的一些感想前言部分 大家可以关注我的公众号&#xff0c;公众号里的排版更好&#xff0c;阅读更舒适。 …

mean技术栈 linux,“MEAN”技术栈开发web应用

var express require(express);var app express();app.listen(3000);var _rootDir __dirname;var protectDir _rootDir /protect/;app.use(express.static(_rootDir));//注册路由app.get(/, function(req, res){res.sendFile(_rootDir/src/index.html);});app.use(functio…

仔细研究Java Identity API

在深入探讨之前&#xff0c;让我们看一下有关Java Identity API JSR 351的一些快速事实。 这仍在进行中。 。 。 JSR是什么时候发起的&#xff1f; 该JSR在2011年10月通过了批准投票&#xff0c;随后在2011年11月成立了专家组。 谁负责此规范&#xff1f; Java Identity AP…

c语言按shift用户随时退出,2014年云南省“三校生”高考计算机第三次模拟试卷...

密班级&#xff1a; 姓名&#xff1a; 学号&#xff1a;密 封 线 内 不 得 答 题玉龙职高2012年高考第三次模拟试卷计算机基础总分&#xff1a;150分&#xff0c;考试时间&#xff1a;120分钟。一、单项选择题(在每小题给出的四个选项中&#xff0c;只有一个是符合题目要求的&a…

无状态EJB:池化和生命周期

无状态EJB池和生命周期的摘要视图&#xff08;注释&#xff09;。 对新手有用。 。 。 。 。 EJB池&#xff1a;快速概述 EJB实例存储在称为EJB池的位置–这不过是内存中的缓存 。 无状态EJB通常按需实例化&#xff0c;即&#xff0c;当客户端调用Bean上的方法时。 但是&…

代码整洁之道——有意义的命名(持续更新中)

我们给变量、参数、类、包&#xff0c;源代码和源代码所在目录命名&#xff0c;也给jar文件、war文件和ear文件命名。 We name variables, parameters, classes, packages, source code, and the directory where the source code resides, as well as jar files, war files, a…

fixed 语句(C# 参考)

fixed 语句禁止垃圾回收器重定位可移动的变量。fixed 语句只能出现在不安全的上下文中。Fixed 还可用于创建固定大小的缓冲区。 备注 fixed 语句设置指向托管变量的指针并在 statement 执行期间“钉住”该变量。如果没有 fixed 语句&#xff0c;则指向可移动托管变量的指针的作…

React Antd中样式的修改

如果需要对antd的样式进行修改&#xff0c; 进入你要修改的页面 注意&#xff1a;不能直接在自己的文件下面&#xff0c;加入一个css&#xff0c;修改这个class的样式&#xff0c;应该 加入global限定&#xff0c;global {} , 在{}里面写入 .classname {} 然后在设置css样式…

【Python】贪心算法入门

一.引言 本文将通过两个问题和两道例题带你入门贪心算法。 贪心算法&#xff08;Greedy Algorithm&#xff09;是一种在每一步选择中都采取在当前状态下最优&#xff08;最好或最有利&#xff09;的选择&#xff0c;从而希望导致全局最优解的算法。贪心算法不保证找到全局最优…

ASP.NET MVC+LINQ开发一个图书销售站点(9):编辑目录

编辑目录和新建类似&#xff0c;这里我们用MVC提供的辅助类 1.在Model 的BookShopDBDataContext分部类里添加: 2. 在CategoryController添加如下方法(注意&#xff1a;我们添加了后端验证) 3. 修改View下的EditCategory.aspx. (注意&#xff1a;我们用了MVC提供的辅助类生成Tex…

内外边距、浮动、布局相关

关于清除元素的内外边距&#xff1a; 1、行内元素只有左右边距、没有内外边距、内边距在ie6等低版本的浏览器中也会有问题。尽量不要给元素指定行内的内外边距&#xff1b; 2、外边距的合并 使用margin定义块元素的垂直外边距时&#xff0c;可能会出现外边距的合并&#xff…