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

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

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

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

<html xmlns="http://www.w3.org/1999/xhtml">6

<head runat="server">7

<title>我们的服务</title>8

<!--12

.tdBG13

{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

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

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

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

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

<!--102

varcurrentF=1;103

document.getElementById("upbtn").style.display="none";104

varmainobj=document.getElementById("main");105

varcount=(mainobj!=null)?mainobj.children.length:0;106

//var count=4;107

//alert(count);108

varframeheight=237;109

varscrolling=0;110

varspeed=20;111

varcheckloaded=newArray();112

for(i=1;i<=count;i++)

{113

checkloaded[i]=0;114

}115

functioncheckdamie(n)

{116

checkloaded[n]=1;117

//alert(checkloaded[n])118

119

}120

functionalertloading(sdirection)

{121

scrolling=0;122

if(sdirection=="down")

{123

currentF--;124

}125

else

{126

currentF++;127

}128

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

}130

131

functionscrolldown(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

else142

{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

160

functionscrollup(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

184

functionslidedown()

{185

//slide186

if(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

//led194

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

vartpobj=eval("document.getElementById('led"+i+"')");201

if(i==currentF)202

tpobj.className='NUM2';203

else204

tpobj.className=(tpobj.className=='NUM2')?'NUM1':tpobj.className;205

}206

}207

else

{208

alertloading("down");209

210

}211

}212

}213

214

215

functionslideup()

{216

//slide217

if(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

//led226

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

else235

eval("document.getElementById('led"+i+"').className='NUM1'");236

}237

}238

else

{239

alertloading("up");240

}241

}242

}243

//auto slide244

vardirection="down";245

varinterval01;246

varautotime=3000;247

functionautoslide()

{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

}262

functioniniautoslide()

{263

interval01=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

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

html重叠图片滑动效果,CSS3/jQuery实现移动端滑动图片层叠效果
我个人比较喜欢这些个H5网页特效,没事就会找一些别人写好的代码修修改改左右滑动距离代码控制:170 (数字越大滑动距离越短)window.CP.exitedLoop(3); initX = mous ...
html图片5秒后消失,如何让网页中图片等待5秒再显示_html/css_WEB-ITnose
如何让网页中图片等待5秒再显示. 网页打开的时候,网页中的图片就会马上显示.如何让某一个图片,在网页打开后5秒在显示出来. 回复讨论(解决方案) 1. 图片载入有判别事件,在事件中设置图片对象的显示隐 ...
dw如何制作图片自动切换效果_如何在Dreamweaver中制作图片切换的效果？
展开全部无标题文档 var s=function(){ var interv=2000; //切换32313133353236313431303231363533e4b893e5b19e313332 ...
dw如何制作图片自动切换效果_如何用Dreamweaver制作出图片切换的效果
QQ图片切换 body{margin: 0px;} A {COLOR: #313131;font-size: 9pt; TEXT-DECORATION: none} A:hover {COLOR: # ...
html鼠标点击切换图片,js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...
用CSS3实现图片切换效果
当几个页面的整体布局相同,只有某个部分在各页面不同时,可以将整体布局的CSS样式写在同一个.css文件中.本次的CSS实现图片s是每个页面下的图片切换效果不同,除此之外,其他的效果都一样.因此,我们可 ...
自定义控件---继承ViewGroup类方式（循序渐进之第3步效果----图片左右拖动+RadioGroup切换效果）
-----------------------下面这个效果只是整个效果的第三步-(目前左右拖动图片+回弹效果+RadioGroup切换效果)---一会继续更新博客------------------- ...
cocos2d-x初探学习笔记（6）--场景间切换效果
小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man Cocos2d-x提供了很多场景间切换的效果, ...
body div js 放大图片_jquery图片放大插件鼠标悬停图片放大效果
都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
Element-ui配合Vue实现走马灯图片自适应效果
elementUI配合Vue实现走马灯图片自适应效果(等比缩放,使得图片缩小不挤压,放大不拉伸变形) 解决方法的原理:监听屏幕视口大小如果'resize',发生改变了,就获取图片的高度height,然 ...

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

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

最新文章

热门文章