亲们,asp.net 网站怎么实现图片的连续滚动,图片要动态绑定的 在网上看了好多,可是加到我的网站里就没效果,这个到底要怎么实现 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <div id="gun4" style="OVERFLOW: hidden; WIDTH: 980px; HEIGHT: 100px; margin:0px 5px 0px 5px; color:#000" align="center"><table id="table22" cellpadding="0" align="center" border="0" cellspace="0"><tbody><tr><td height="80" align="center" id="gun5"><asp:DataList id="dltTu" runat="server" RepeatDirection="Horizontal" CellPadding="0" CellSpacing="0"><ItemTemplate>自己绑定</ItemTemplate></asp:DataList></td><td id="gun6"></td><script> var speed=30 gun6.innerHTML=gun5.innerHTML function Marquee(){ if(gun6.offsetWidth-gun4.scrollLeft<=0) gun4.scrollLeft-=gun5.offsetWidth else{ gun4.scrollLeft++ } } var MyMar=setInterval(Marquee,speed) gun4.onmouseover=function(){ clearInterval(MyMar) } gun4.onmouseout=function() { MyMar=setInterval(Marquee,speed) }</script> </tr> </tbody> </table></div> 随便换张图片用<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title></title></head><body><script type="text/javascript">var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id;};var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } }}Object.extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination;}function addEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.addEventListener) { oTarget.addEventListener(sEventType, fnHandler, false); } else if (oTarget.attachEvent) { oTarget.attachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = fnHandler; }};var Scroller = Class.create();Scroller.prototype = { initialize: function(idScroller, idScrollMid, idScrollLeft, idScrollRight, options) { var oScroll = this, oScroller = $(idScroller), oScrollMid = $(idScrollMid); this.widthScroller = oScroller.offsetWidth; this.widthList = oScrollMid.offsetWidth; if(this.widthList <= this.widthScroller) return; oScroller.style.overflow = "hidden"; oScrollMid.appendChild(oScrollMid.cloneNode(true)); this.oScroller = oScroller; this.scroll = true; this.SetOptions(options); this.side = 1;//1是左 -1是右 switch (this.options.Side) { case "right" : this.side = -1; break; case "left" : default : this.side = 1; } addEventHandler(oScrollMid , "mouseover", function() { oScroll.scroll = false; }); addEventHandler(oScrollMid , "mouseout", function() { oScroll.scroll = true; }); if(idScrollLeft) { addEventHandler($(idScrollLeft), "click", function() { oScroll.side = 1; }); } if(idScrollRight) { addEventHandler($(idScrollRight), "click", function() { oScroll.side = -1; }); } this.Scroll(); }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Step: 1,//每次变化的px量 Time: 50,//速度 Side: "left"//默认滚动方向 }; Object.extend(this.options, options || {}); }, //滚动 Scroll: function() { if (this.scroll) { var iScroll = this.oScroller.scrollLeft, iWidth = this.widthList; if(this.side > 0){ if(iScroll >= (iWidth * 2 - this.widthScroller)){ iScroll -= iWidth; } } else { if(iScroll <= 0){ iScroll += iWidth; } } this.oScroller.scrollLeft = iScroll + this.options.Step * this.side;//注意scrollLeft超过1400会自动变回1400 注意长度 } var oScroll = this; window.setTimeout(function(){ oScroll.Scroll(); }, this.options.Time); }};window.onload = function(){ new Scroller("idScroller","idScrollMid", "idScrollLeft", "idScrollRight");}</script><div id="idScroller" style="width:290px; overflow:hidden"><div style="width:2000px"> <div id="idScrollMid" style="float:left;"> <div style="float:left"> <img src="../download/20111110/000284acea2c0835345f26a44bbdaa49.jpg" width="150px" height="150px;"/> </div> <div style="float:left"> <img src="../download/20111110/0791541f0e5eb6169fcc722640ea82b7.jpg" width="150px" height="150px;"/> </div> </div></div></div><input id="idScrollLeft" type="button" value="向左" /><input id="idScrollRight" type="button" value="向右" /></body></html> <div id="demo" style="OVERFLOW: hidden; WIDTH:98%; HEIGHT: 98%" align="center"> <table cellspacing="0" cellpadding="0" align="left" border="0" > <tbody> <tr> <td id="demo1" valign="top"> <table width="98%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td><%=imageUrl %></td>//这里绑定你要从数据出的图片链接 </tr> </table> </td> <td id="demo2" valign="top"></td></tr></tbody> </table> <script type="text/javascript"> var speed=1 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetWidth-demo.scrollLeft<=0) demo.scrollLeft-=demo1.offsetWidth else{ demo.scrollLeft++ } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script></div> <style type="text/css"> #demo { overflow: hidden; width: 510px; } #demo img { } #indemo { float: left; width: 800%; } #demo1 { float: left; } #demo2 { float: left; } .style1 { width: 121px; } </style> <div id="demo"> <div id="indemo"> <div id="demo1"> <asp:DataList ID="DataList2" runat="server" RepeatDirection="Horizontal" RepeatColumns="5" Width="131px"> <ItemTemplate> <table width="131" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="121" border="0" cellspacing="0" cellpadding="0" style="border: 1px #000000 solid;"> <tr> <td height="80"> <table width="119" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td> <a href="fckf_content.aspx?id=<%#Eval("news_ID") %>" target="_blank"> <img src="<%#Eval("news_pictitle")%>" width="119" height="59" /> </a> </td> </tr> <tr> <td height="19" align="center" bgcolor="#252525" class="bai12"> <a href="fckf_content.aspx?id=<%#Eval("news_ID") %>" target="_blank"> <%#Eval("news_title")%></a> </td> </tr> </table> </td> </tr> </table> </td> <td width="8"> </td> </tr> </table> </ItemTemplate> </asp:DataList> </div> <div id="demo2"> </div> </div> </div> <script> <!-- var speed=20; //数字越大速度越慢 var tab=document.getElementById("demo"); var tab1=document.getElementById("demo1"); var tab2=document.getElementById("demo2"); tab2.innerHTML=tab1.innerHTML; function Marquee(){ if(tab2.offsetWidth-tab.scrollLeft<=0) tab.scrollLeft-=tab1.offsetWidth else{ tab.scrollLeft++; } } var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() {clearInterval(MyMar)}; tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; --> </script> 用jquery的插件 jquery.smallslider.js,可以去网上搜索一下 就是你从网上下个例子,把那个绝对的路径换成从数据库中取出的路径。<%=imageurl%> 无法显示 XML 页。 不能看懂代码,谁能逐行帮我解释一下~ 奇怪:网站在开发vs运行没有问题在iis里面就有问题? 绑定的SqlDataSource中能不能用Inner join?对应的Eval、Bind怎么写? 请教高手,我在做ASP.net+SQL的网站,交友类网站 简单但急,关于DataGrid 给定一个日期,与datalist结合,怎么做? 求救:使用oledbconnection连接ORACLE数据库的设置 jmail收不到邮件的问题 怎么样在对文本框控件进行回写的时候把他写成红色? 当前上下文找不到控件ID SQL查询问题!
<table id="table22" cellpadding="0" align="center" border="0" cellspace="0">
<tbody>
<tr>
<td height="80" align="center" id="gun5">
<asp:DataList id="dltTu" runat="server" RepeatDirection="Horizontal" CellPadding="0" CellSpacing="0">
<ItemTemplate>
自己绑定
</ItemTemplate>
</asp:DataList>
</td>
<td id="gun6"></td>
<script>
var speed=30
gun6.innerHTML=gun5.innerHTML
function Marquee(){
if(gun6.offsetWidth-gun4.scrollLeft<=0)
gun4.scrollLeft-=gun5.offsetWidth
else{
gun4.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
gun4.onmouseover=function(){
clearInterval(MyMar)
}
gun4.onmouseout=function() {
MyMar=setInterval(Marquee,speed)
}
</script>
</tr>
</tbody>
</table>
</div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head>
<body><script type="text/javascript">
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
var Scroller = Class.create();
Scroller.prototype = {
initialize: function(idScroller, idScrollMid, idScrollLeft, idScrollRight, options) {
var oScroll = this, oScroller = $(idScroller), oScrollMid = $(idScrollMid);
this.widthScroller = oScroller.offsetWidth;
this.widthList = oScrollMid.offsetWidth;
if(this.widthList <= this.widthScroller) return;
oScroller.style.overflow = "hidden";
oScrollMid.appendChild(oScrollMid.cloneNode(true));
this.oScroller = oScroller;
this.scroll = true;
this.SetOptions(options);
this.side = 1;//1是左 -1是右
switch (this.options.Side) {
case "right" :
this.side = -1;
break;
case "left" :
default :
this.side = 1;
}
addEventHandler(oScrollMid , "mouseover", function() { oScroll.scroll = false; });
addEventHandler(oScrollMid , "mouseout", function() { oScroll.scroll = true; });
if(idScrollLeft) { addEventHandler($(idScrollLeft), "click", function() { oScroll.side = 1; }); }
if(idScrollRight) { addEventHandler($(idScrollRight), "click", function() { oScroll.side = -1; }); }
this.Scroll();
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Step: 1,//每次变化的px量
Time: 50,//速度
Side: "left"//默认滚动方向
};
Object.extend(this.options, options || {});
},
//滚动
Scroll: function() {
if (this.scroll) {
var iScroll = this.oScroller.scrollLeft, iWidth = this.widthList;
if(this.side > 0){
if(iScroll >= (iWidth * 2 - this.widthScroller)){ iScroll -= iWidth; }
} else {
if(iScroll <= 0){ iScroll += iWidth; }
}
this.oScroller.scrollLeft = iScroll + this.options.Step * this.side;//注意scrollLeft超过1400会自动变回1400 注意长度
}
var oScroll = this; window.setTimeout(function(){ oScroll.Scroll(); }, this.options.Time);
}
};window.onload = function(){
new Scroller("idScroller","idScrollMid", "idScrollLeft", "idScrollRight");
}
</script>
<div id="idScroller" style="width:290px; overflow:hidden">
<div style="width:2000px">
<div id="idScrollMid" style="float:left;">
<div style="float:left"> <img src="../download/20111110/000284acea2c0835345f26a44bbdaa49.jpg" width="150px" height="150px;"/> </div>
<div style="float:left"> <img src="../download/20111110/0791541f0e5eb6169fcc722640ea82b7.jpg" width="150px" height="150px;"/> </div>
</div>
</div>
</div>
<input id="idScrollLeft" type="button" value="向左" />
<input id="idScrollRight" type="button" value="向右" />
</body>
</html>
<table cellspacing="0" cellpadding="0" align="left" border="0" >
<tbody>
<tr>
<td id="demo1" valign="top">
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><%=imageUrl %></td>//这里绑定你要从数据出的图片链接
</tr>
</table> </td>
<td id="demo2" valign="top"></td></tr></tbody>
</table>
<script type="text/javascript">
var speed=1
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</div>
#demo
{
overflow: hidden;
width: 510px;
}
#demo img
{
}
#indemo
{
float: left;
width: 800%;
}
#demo1
{
float: left;
}
#demo2
{
float: left;
}
.style1
{
width: 121px;
}
</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<asp:DataList ID="DataList2" runat="server" RepeatDirection="Horizontal" RepeatColumns="5"
Width="131px">
<ItemTemplate>
<table width="131" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="121" border="0" cellspacing="0" cellpadding="0" style="border: 1px #000000 solid;">
<tr>
<td height="80">
<table width="119" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="fckf_content.aspx?id=<%#Eval("news_ID") %>" target="_blank">
<img src="<%#Eval("news_pictitle")%>" width="119" height="59" />
</a>
</td>
</tr>
<tr>
<td height="19" align="center" bgcolor="#252525" class="bai12">
<a href="fckf_content.aspx?id=<%#Eval("news_ID") %>" target="_blank">
<%#Eval("news_title")%></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="8">
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</div>
<div id="demo2">
</div>
</div>
</div> <script>
<!--
var speed=20; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>