我用Repeater绑定图片，然后想让其横向滚动，我用marquee，但是有间隙，我在网上看了好多，都建议用JS，但是我JS不熟悉，请到手帮忙，急。

lsoon 2008-07-30 08:00:03
我用Repeater绑定图片，然后想让其横向滚动，我用marquee，但是有间隙，我在网上看了好多，都建议用JS，但是我JS不熟悉，请到手帮忙，急。

<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div style="float:left;width:100px;margin-left:5px;margin-right:5px;margin-top:5px;">
<div style="float:left;width:100px;height:75px;padding:2px;border:1px #cccccc solid;">
<a href="ShowGlory.aspx?Grilous_ID= <%#Eval("Grilous_ID") %>"> <img src="images/gloryPic/ <%#Eval("Grilous_Pic")%>" width="100" height="75" border="0" /> </a>
</div>
<div style="float:left;width:100px;height:30px;line-height:20px;text-align:center;">
<a href="ShowGlory.aspx?Grilous_ID= <%#Eval("Grilous_ID") %>" title=" <%#Eval("Grilous_Tittle") %>"> <font color="986A01"> <%#cutstr(Eval("Grilous_Tittle").ToString(), 8)%> </font> </a>
</div>
</div>
</ItemTemplate>
...全文
203 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
tocoya 2009-06-15
  • 打赏
  • 举报
 回复
真的很菜……
zhpfeiqq 2008-08-01
  • 打赏
  • 举报
 回复 
<script language="JavaScript" type=text/javascript> 

//Specify the slider's width (in pixels) 

var sliderwidth="720px" 

//Specify the slider's height 

var sliderheight="55px" 

//Specify the slider's slide speed (larger is faster 1-10) 

var slidespeed=1 

//configure background color: 

slidebgcolor="#FFFFFF" 



//Specify the slider's images 

var leftrightslide=new Array() 

var finalslide='' 

leftrightslide[0]='<a href="pic_c0.htm" target="_blank"><img src="MFC_images/123-1.jpg" alt="pic0" border=0></a>' 

leftrightslide[1]='<a href="pic_c1.htm" target="_blank"><img src="MFC_images/123-1.jpg" alt="pic1" border=0></a>' 

leftrightslide[2]='<a href="pic_c2.htm" target="_blank"><img src="MFC_images/123-1.jpg" alt="pic2" border=0></a>' 

leftrightslide[3]='<a href="pic_c3.htm" target="_blank"><img src="MFC_images/123-1.jpg" alt="pic3" border=0></a>' 

leftrightslide[4]='<a href="pic_c4.htm" target="_blank"><img src="MFC_images/123-1.jpg" alt="pic4" border=0></a>' 

leftrightslide[5]='<a href="pic_c5.htm" target="_blank"><img src="MFC_images/123-1.jpg" alt="pic5" border=0></a>' 

leftrightslide[6]='<a href="pic_c6.htm" target="_blank"><img src="MFC_images/123-1.jpg" alt="pic6" border=0></a>' 

leftrightslide[7]='<a href="pic_c7.htm" target="_blank"><img src="MFC_images/123-1.jpg" alt="pic7" border=0></a>' 

leftrightslide[8]='<a href="pic_c8.htm" target="_blank"><img src="MFC_images/123-1.jpg" alt="pic8" border=0></a>' 

leftrightslide[9]='<a href="pic_c9.htm" target="_blank"><img src="MFC_images/123-1.jpg" alt="pic9" border=0></a>' 

leftrightslide[10]='<a href="pic_c10.htm" target="_blank"><img src="MFC_images/123-1.jpg" alt="pic10" border=0></a>' 

//Specify gap between each image (use HTML): 

var imagegap=" " 



//Specify pixels gap between each slideshow rotation (use integer): 

var slideshowgap=5 





////NO NEED TO EDIT BELOW THIS LINE//////////// 



var copyspeed=slidespeed 

leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>' 

var iedom=document.all||document.getElementById 

if (iedom) 

document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>') 

var actualwidth='' 

var cross_slide, ns_slide 



function fillup(){ 

if (iedom){ 

cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2 

cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3 

cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide 

actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth 

cross_slide2.style.left=actualwidth+slideshowgap+"px" 

} 

else if (document.layers){ 

ns_slide=document.ns_slidemenu.document.ns_slidemenu2 

ns_slide2=document.ns_slidemenu.document.ns_slidemenu3 

ns_slide.document.write(leftrightslide) 

ns_slide.document.close() 

actualwidth=ns_slide.document.width 

ns_slide2.left=actualwidth+slideshowgap 

ns_slide2.document.write(leftrightslide) 

ns_slide2.document.close() 

} 

lefttime=setInterval("slideleft()",30) 

} 

window.onload=fillup 



function slideleft(){ 

if (iedom){ 

if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8)) 

cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px" 

else 

cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px" 



if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8)) 

cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px" 

else 

cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px" 



} 

else if (document.layers){ 

if (ns_slide.left>(actualwidth*(-1)+8)) 

ns_slide.left-=copyspeed 

else 

ns_slide.left=ns_slide2.left+actualwidth+slideshowgap 



if (ns_slide2.left>(actualwidth*(-1)+8)) 

ns_slide2.left-=copyspeed 

else 

ns_slide2.left=ns_slide.left+actualwidth+slideshowgap 

} 

} 





if (iedom||document.layers){ 

with (document){ 

document.write('<table border="0" cellspacing="0" cellpadding="0"><td>') 

if (iedom){ 

write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">') 

write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">') 

write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>') 

write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>') 

write('</div></div>') 

} 

else if (document.layers){ 

write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>') 

write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>') 

write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>') 

write('</ilayer>') 

} 

document.write('</td></table>') 

} 

} 

</script>

[Quote=引用 8 楼 lsoon 的回复:]
这样的话，图片是固定的，小弟现在搞不懂的就是不知道怎么吧JS里面的固定的图片地址换成动的（图片路径存在数据库）。
谢谢！
[/Quote]
想要动的可以把
leftrightslide[0]='<a href="pic_c0.htm" target="_blank"><img src="MFC_images/123-1.jpg" alt="pic0" border=0></a>'
这里换成<%=后台指定的URL%>
lsoon 2008-08-01
  • 打赏
  • 举报
 回复
这样的话，图片是固定的，小弟现在搞不懂的就是不知道怎么吧JS里面的固定的图片地址换成动的（图片路径存在数据库）。
谢谢！
oec2003 2008-08-01
  • 打赏
  • 举报
 回复
樓上很詳細
lsoon 2008-08-01
  • 打赏
  • 举报
 回复
麻烦你给个例子，小弟弟最JS真的很菜，请指教
srym 2008-08-01
  • 打赏
  • 举报
 回复
你用repeater绑定一下ITEMTEMPLATE里 动态输出一下 就可以了 输出的时候<img>里控制一下大小！
srym 2008-07-31
  • 打赏
  • 举报
 回复 


<HTML><HEAD><TITLE>无标题文档</TITLE>

<META http-equiv=Content-Type content="text/html; charset=gb2312">

<META content="MSHTML 6.00.2800.1264" name=GENERATOR>

<link href="css.css" rel="stylesheet" type="text/css">

</HEAD>

<BODY leftMargin=0 topMargin=2 marginheight="0" marginwidth="0">

<CENTER>

  <TABLE 

style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid" 

cellSpacing=0 cellPadding=0 width=750 align=center border=0>

  <TBODY>

  <TR>

    <TD>

      <DIV id=demo style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff">

      <TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">

        <TBODY>

        <TR>

          <TD id=demo1 vAlign=top><table width="1710" height="116"  border="0" cellpadding="0" cellspacing="0">

            <tr>

              <td width="171" background="pic_bg.jpg"><div align="center">1</div></td>

              <td width="171" background="pic_bg.jpg"><div align="center">

                <p>2</p>

                </div></td>

              <td width="171" background="pic_bg.jpg"><div align="center">3</div></td>

              <td width="171" background="pic_bg.jpg"><div align="center">4</div></td>

              <td width="171" background="pic_bg.jpg"><div align="center">5</div></td>

              <td width="171" background="pic_bg.jpg"><div align="center">6</div></td>

              <td width="171" background="pic_bg.jpg"><div align="center">7</div></td>

              <td width="171" background="pic_bg.jpg"><div align="center">8</div></td>

              <td width="171" background="pic_bg.jpg"><div align="center">9</div></td>

              <td width="171" background="pic_bg.jpg"><div align="center">10</div></td>

            </tr>

          </table></TD>

          <TD id=demo2 vAlign=top> </TD></TR></TBODY></TABLE></DIV>

      <SCRIPT>

var speed3=25//速度数值越大速度越慢

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed3)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}

</SCRIPT>

    </TD></TR></TBODY></TABLE></TD></TR></TABLE>

</CENTER>

</BODY></HTML>








P {

	MARGIN: 20px

}

.table-left-right {

	BORDER-LEFT: #E7E7E7 1px solid;

	BORDER-RIGHT: #E7E7E7 1px solid;

}

TD {

	font-size: 12px;

	color: #000000;

}

.hangju {

	font-size: 12px;

	color: #000000;

	line-height: 20px;

	word-spacing: 3pt;

}

.title

{

	font-size: 14px;

	color: #000000;

	font-family: "宋体";

	font-weight: bold;

}

.title2

{

	font-size: 12px;

	color: #ffffff;

	font-family: "宋体";

	font-weight: bold;

}

.title3

{

	font-size: 12px;

	color: #000000;

	font-family: "宋体";

	font-weight: bold;

}

a:link {

	font-size: 12px;

	color: #000000;

	text-decoration: underline;

	line-height: 12px;

}

a:visited {

	font-size: 12px;

	color: #000000;

}

a:hover {

	font-size: 12px;

	color: #000000;

}

a:active {

	font-size: 12px;

	color: #000000;

}

.INPUT {

	BORDER-RIGHT: #cccccc 1px solid; BORDER-TOP: #cccccc 1px solid; FONT-SIZE: 9pt; BORDER-LEFT:#cccccc 1px solid; CURSOR: hand; BORDER-BOTTOM: #cccccc 1px solid; 

}
愚者只看星不看答案 2008-07-31
  • 打赏
  • 举报
 回复
哦,是指头尾不能相接吧.



<table width="778" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">

<tr>

<td width="778" height="50">

<div id=demo style=overflow:hidden;width:778;align=center>

<table border=0 cellpadding=1 cellspacing=1>

<tr>

<td id=marquePic1>

<table width=90% border=0 cellspacing=0 cellpadding=0>

<tr align=center>

<td><a href="http://www.cntour.org" target="_blank"><img src="http://www.hn-tide.com.cn/images/cx/cx13.gif" width="145" height="50" border="0" /></a></td>

<td><a href="http://www.chinaleather.com/"><img border="0" src="http://www.hn-tide.com.cn/images/hainingpige.jpg" /></a></td>

<td><a href="http://www.jsxq.gov.cn" target="_blank"><img src="http://www.hn-tide.com.cn/images/cx/cx14.gif" width="145" height="50" border="0" /></a></td>

<td><a href="http://www.haininghotel.cn" target="_blank"><img src="http://www.hn-tide.com.cn/images/logo_2.gif" width="145" height="50" border="0" /></a></td>

<td><a href="http://www.hngardenhotel.com" target="_blank"><img src="http://www.hn-tide.com.cn/images/logo_3.gif" width="145" height="50" border="0" /></a></td>

<td><a href="http://www.hnhih.com" target="_blank"><img src="http://www.hn-tide.com.cn/images/logo_4.gif" width="145" height="50" border="0" /></a></td>

<td><img src="http://www.hn-tide.com.cn/images/logo_5.gif" width="145" height="50" /></td>

<td><a href="http://www.haizhouhotel.cn" target="_blank"><img src="http://www.hn-tide.com.cn/images/logo_1.gif" width="145" height="50" border="0" /></a></td>

<td><img src="http://www.hn-tide.com.cn/images/logo_7.gif" width="145" height="50" /></td>

<td><img src="http://www.hn-tide.com.cn/images/logo_6.gif" width="145" height="50" /></td>

</tr>

</table>

</td>

<td id=marquePic2 valign=top></td>

</tr>

</table>

</div>

</td>

</tr>

</table>

<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>
lsoon 2008-07-31
  • 打赏
  • 举报
 回复
谢了，我的意思是滚动时，前面会有一片空白，你说的这个间隙是我故意设置的margin-left:5px;margin-right:5px这样做肯定是会有间隙的.还有这个padding:2px ，我是想实现图片滚动效果。
lsoon 2008-07-31
  • 打赏
  • 举报
 回复
谢了，我得意思就是不知道JS怎么用。不知道怎么替换，请指教，小弟急用，来不急学JS，thank you !
szoe5203 2008-07-30
  • 打赏
  • 举报
 回复
使用marquee就会有间隙
不能实现无缝连接滚动
似乎只有JS了
不过偶也不熟
愚者只看星不看答案 2008-07-30
  • 打赏
  • 举报
 回复
所谓的w3c标准,害了一群人.

margin-left:5px;margin-right:5px这样做肯定是会有间隙的.还有这个padding:2px
jquery图片一张一张跳滚动插件 Repeater绑定数据源
jquery图片一张一张跳滚动插件 利用 Repeater绑定数据源
Repeater 绑定 List 数据源
Repeater 绑定 List 数据源
无限级联绑定 repeater列表管理
无限级联绑定 repeater列表 管理 添加 删除，很简单 一看就明白怎么用，不明白问我，呵呵
repeater数据绑定控件的使用
这是ASP.NET最常用的数据绑定控件的使用详解。大多数网站都是以这个做数据绑定的，学习网站开发必不可缺的控件。
Repeater绑定无限极分类
次文档使用了Repeater控件实现了无限极分类的绑定操作。
.NET社区

62,046

社区成员

669,049

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章