<div id="imageFlow" style="overflow: hidden; width: 680px; background-color: #EFFBEF; height: 174px">
<table width="645" height="174" border="0" style="vertical-align: top" cellspacing="0" cellpadding="0" class="blogphototab">
<tr>
<td id="demo1" align="left">
<asp:Repeater ID="RepeaterPhotolist" runat="server">
<ItemTemplate>
<table width="215" height="174" background="images/products_bj1.gif">
<tr><td height="2"></td></tr>
<tr>
<td height="133" align="center" valign="top"><img src="<%#Eval("picUrl") %>" style="width:160px; height:129px;"/></td>
</tr>
<tr>
<td height="39" align="center" valign="top"><font style="font-size:12px"><%#Eval("title") %></font></td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
</td>
<td id="demo2">
</td>
</tr>
</table>
</div>
<div id="bigImgDiv" style="display: none; z-index: 100; position: absolute;">
<img height="100" id="bigImg" src="" width="120"/>
</div>
<script>
var speed=20//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-imageFlow.scrollLeft<0)
imageFlow.scrollLeft-=demo1.offsetWidth
else{ imageFlow.scrollLeft++ } }
var MyMar=setInterval(Marquee,speed)
imageFlow.onmouseover=function() {clearInterval(MyMar)}
imageFlow.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</div>
<table width="645" height="174" border="0" style="vertical-align: top" cellspacing="0" cellpadding="0" class="blogphototab">
<tr>
<td id="demo1" align="left">
<asp:Repeater ID="RepeaterPhotolist" runat="server">
<ItemTemplate>
<table width="215" height="174" background="images/products_bj1.gif">
<tr><td height="2"></td></tr>
<tr>
<td height="133" align="center" valign="top"><img src="<%#Eval("picUrl") %>" style="width:160px; height:129px;"/></td>
</tr>
<tr>
<td height="39" align="center" valign="top"><font style="font-size:12px"><%#Eval("title") %></font></td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
</td>
<td id="demo2">
</td>
</tr>
</table>
</div>
<div id="bigImgDiv" style="display: none; z-index: 100; position: absolute;">
<img height="100" id="bigImg" src="" width="120"/>
</div>
<script>
var speed=20//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-imageFlow.scrollLeft<0)
imageFlow.scrollLeft-=demo1.offsetWidth
else{ imageFlow.scrollLeft++ } }
var MyMar=setInterval(Marquee,speed)
imageFlow.onmouseover=function() {clearInterval(MyMar)}
imageFlow.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</div>
解决方案 »
- .NET 怎样将一段前台代码封装成类供各页面调用
- 索引超出范围。必须为非负值并小于集合大小。参数名:index
- 急请教:利用Timer、UpdatePanel局部刷新页面,客户端Browser占用内存不断增长
- 如何在一个字符串中判断是否有中文!!!!!(在线等!!)
- Petshop 使用 DataReader 模式。Duwamish 使用 DataSet 模式。 两种方法都太极端,我现在 数据访问层 混用两种方法行不? 有谁试过。效果
- 关于确认控件的问题求教
- 使用水晶报表,在本机正确,但放到服务器上出错。
- 写asp.net系统时用到多线程了吗?
- 请高手指点:SOCKET的方面的问题。高分
- 做了一标准查询的网页,标准条数特别多100多万,而且数据量特别大,查询慢用什么解决方法。
- 二进制流导出word,内容出现乱码,各位帮忙进来看看,谢谢!
- .NET页面10妙刷新一次怎么实现。。
只要复制在body就可以运行了。急呀................
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
TD {FONT-SIZE: 12px;}
</style>
</head><body>
<div id=demo style="OVERFLOW: hidden; WIDTH: 760px; align: center">
<table cellspacing="0" cellpadding="0" align="center"
border="0">
<tbody>
<tr>
<td id="marquePic1" valign="top">
<table width="958" height="130" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="95" height="110" align="center">1</td>
<td width="95" align="center">2</td>
<td width="95" align="center">3</td>
<td width="95" align="center">4</td>
<td width="95" align="center">5</td>
<td width="95" align="center">6</td>
<td width="95" align="center">7</td>
<td width="95" align="center">8</td>
<td width="95" align="center">9</td>
<td width="103" align="center">0</td>
</tr>
<tr>
<td height="20" align="center" bgcolor="#CCCCCC"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center" bgcolor="#FFFF99"> </td>
</tr>
</table>
</td>
<td id="marquePic2" valign="top"></td>
</tr>
</tbody>
</table>
</div>
<script type=text/javascript>
var speed=30
marquePic2.innerHTML=marquePic1.innerHTML
function Marquee(){
if(demo.scrollLeft>=marquePic1.scrollWidth){
demo.scrollLeft=0
}else{
demo.scrollLeft++
}}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script></body>
</html>
如果单纯的运行图片的,也是可以滚动的。
但加了背景,图片和文字之后,就不滚动了。
<head><title>
无标题页
</title><link href="style.css" rel="stylesheet" /></head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTg2OTY0MTUxOQ9kFgICAw9kFgICAQ8WAh4LXyFJdGVtQ291bnQCERYiZg9kFgJmDxUCHy91cGxvYWQvbmV3cy8yMDEwMDcwNzAxMjI0OC5naWYh5YC+6L2s5byP6YeR5bGe5Z6L6YeN5Yqb6ZO46YCg5py6ZAIBD2QWAmYPFQIfL3VwbG9hZC9uZXdzLzIwMTAwNjI5MDE0NzAyLmpwZwtBMeivleagt+acumQCAg9kFgJmDxUCHy91cGxvYWQvbmV3cy8yMDEwMDYyOTAxNDYzMC5qcGcSQTIw57O75YiX5bCE6Iqv5py6ZAIDD2QWAmYPFQIfL3VwbG9hZC9uZXdzLzIwMTAwNjI5MDE0NjAzLmpwZxJBNDDns7vliJflsIToiq/mnLpkAgQPZBYCZg8VAh8vdXBsb2FkL25ld3MvMjAxMDA2MjkwMTQ1MzIuanBnEkErIOezu+WIl+WwhOiKr+acumQCBQ9kFgJmDxUCHy91cGxvYWQvbmV3cy8yMDEwMDYyOTAxNDUwMC5qcGcQQ+ezu+WIl+WwhOiKr+acumQCBg9kFgJmDxUCHy91cGxvYWQvbmV3cy8yMDEwMDYyOTAxNDQyOC5qcGcQROezu+WIl+WwhOiKr+acumQCBw9kFgJmDxUCHy91cGxvYWQvbmV3cy8yMDEwMDYyOTAxNDM0OC5qcGcVTVNB5Z6C55u05byP5re356CC5py6ZAIID2QWAmYPFQIAFU1TQuawtOW5s+W8j+a3t+egguacumQCCQ9kFgJmDxUCHy91cGxvYWQvbmV3cy8yMDEwMDYyOTAxNDIyOS5qcGcVTVND56e75Yqo5byP5re356CC5py6ZAIKD2QWAmYPFQIAEuWItuiKr+i+heWKqeiuvuWkh2QCCw9kFgJmDxUCHy91cGxvYWQvbmV3cy8yMDEwMDYyOTAyMjAzMi5qcGch5Zu65a6a5byP6YeR5bGe5Z6L6YeN5Yqb6ZO46YCg5py6ZAIMD2QWAmYPFQIfL3VwbG9hZC9uZXdzLzIwMTAwNzA3MDEwNTAwLnBuZwzliLboiq/kuK3lv4NkAg0PZBYCZg8VAh8vdXBsb2FkL25ld3MvMjAxMDA3MDcwMTI0NTYuZ2lmG+acuuWZqOS6uumHjeWKm+a1h+azqOWNleWFg2QCDg9kFgJmDxUCHy91cGxvYWQvbmV3cy8yMDEwMDcwNzAxMTc0My5naWYJ57uE6Iqv57q/ZAIPD2QWAmYPFQIfL3VwbG9hZC9uZXdzLzIwMTAwNzA3MDEyNTMxLnBuZxXoh6rliqjmtYfms6jmnLrmorDoh4JkAhAPZBYCZg8VAh8vdXBsb2FkL25ld3MvMjAxMDA3MDcwMTE4MjAuZ2lmCeWjs+Wei+e6v2RkVqCh0CZRHZ17uUCl0iVP4xytGeM=" />
</div> <div>
<div id="imageFlow" style="overflow: hidden; width: 680px; background-color: #EFFBEF; height: 174px">
<table width="645" height="174" border="0" style="vertical-align: top" cellspacing="0" cellpadding="0" class="blogphototab">
<tr>
<td id="demo1" align="left">
<table width="215" height="174" background="images/products_bj1.gif">
<tr><td height="2"></td></tr>
<tr>
<td height="133" align="center" valign="top"><img src="/upload/news/20100707012248.gif" style="width:160px; height:129px;"/></td>
</tr>
<tr>
<td height="39" align="center" valign="top"><font style="font-size:12px">倾转式金属型重力铸造机</font></td>
</tr>
</table>
<table width="215" height="174" background="images/products_bj1.gif">
<tr><td height="2"></td></tr>
<tr>
<td height="133" align="center" valign="top"><img src="/upload/news/20100629014702.jpg" style="width:160px; height:129px;"/></td>
</tr>
<tr>
<td height="39" align="center" valign="top"><font style="font-size:12px">A1试样机</font></td>
</tr>
</table>
</td>
<td id="demo2">
</td>
</tr>
</table>
</div>
<div id="bigImgDiv" style="display: none; z-index: 100; position: absolute;">
<img height="100" id="bigImg" src="" width="120"/>
</div>
<script>
var speed=20//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-imageFlow.scrollLeft<0)
imageFlow.scrollLeft-=demo1.offsetWidth
else{ imageFlow.scrollLeft++ } }
var MyMar=setInterval(Marquee,speed)
imageFlow.onmouseover=function() {clearInterval(MyMar)}
imageFlow.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</div>
</form>
</body>
</html>
这是结果
还有,加了width: 680px,横向滚动条可能没有。
http://ufo-crackerx.blog.163.com/
var speed=10; //设置图片滚动速度
demo2.innerHTML=demo1.innerHTML ; //复制demo1为demo2
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0) //当滚动至demo1与demo2交界时
demo.scrollLeft-=demo1.offsetWidth ; //dome跳到最左端
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed); //设置定时器
demo.onmouseover=function() {clearInterval(MyMar);} //鼠标移上时清除定时器达到滚动停止的目的
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed);}//鼠标移开时重设定时器,继续滚动
</SCRIPT>