下次自动登录
现在的位置:
& 综合 & 正文
asp.net+js方式实现的幻灯图片效果展示
最近一直在出差中，由于以前政府网站项目中的一个图片幻灯不知道咋的不能用了，图片出不来，原先的方式是直接通过Adobe的插件实现的，检查了一下，没发现问题，后来干脆换了个js的，效果如下：
main.css文件内容如下：
/*********CSS reset ***********/
*{margin:0;padding:0;}
ul,li,ol{ list-style:}
img,a img{ border:}
table{ border-collapse: border-spacing:0;}
em,i,u{ font-style:}
a{ text-decoration:color:#434343;}
a:hover{ text-decoration: color:#ff4000;}
body{font-size:12 font-family:"宋体";color:#434343;}
.clear{clear:
font-size:0; overflow: height:0;}
.blank10{clear:
font-size:0; overflow: height:10}
.blank{clear:
font-size:0; overflow: height:10 background:#FFF;}
/*********content css定义***********/
#content{width:960margin:0}
h1,h2,h3{ font-family:"微软雅黑";color:#00659b;}
h1,h2,h3,h4,h5,h6{ font-weight:}
#footer{padding-bottom:0;margin:0px auto 0;}
/*********main css定义***********/
.mb15 {margin-bottom: 0}
#main{width:960 margin:6px auto 10 overflow:}
/*********图片切换 css定义***********/
.sub_box{width:235 height:190 float: position: overflow: border:1px solid # background:url(/trip/default/news/images/logo_gray.jpg) center center no- *background:url(/trip/default/news/images/logo_gray.jpg) 220px 120px no-}
.sub_box img{border: width:235 height:190}
#bd1lfimg{position: width:235 height:190 overflow:}
#bd1lfimg div{width:100000 margin-left:-4}
#bd1lfimg dl{width:235 height:190 position: overflow: float:}
#bd1lfimg dt{width:235 height:190 position: left:0 top:0}
#bd1lfimg dd{width:623 height:40 background:#000000; filter:alpha(Opacity=70); Opacity:0.7; position: left:0 bottom:0 padding:0 6}
#bd1lfimg dd h2{height:25 padding:8px 0 4px 0; line-height:25 overflow:}
#bd1lfimg dd h2 a{font-size:14 font-weight: color:#}
#bd1lfimg dd a{color:# text-decoration:}
#bd1lfimg dd a:hover{text-decoration: color:#}
#bd1lfimg dd tt{color:# line-height:1.2 text-align: border:#FF0000 1 width:100%; float:}
#bd1lfimg dd tt a:hover{text-decoration:}
.sub_nav{width:235 height:25 bottom:0 position: color:#999999; z-index:200;}
.sub_no{height:25 float:}
.sub_no li{display: width:25 height:25 float: overflow: line-height:25 vertical-align: text-align: background:#000000; filter:alpha(Opacity=70); Opacity:0.7; font-family:A font-size:11 color:#999999; cursor:}
.sub_no li.show{background:# color:#000000;}
.sub_more{float: width:50 height:25 background:#000000; filter:alpha(Opacity=70); Opacity:0.7; color:#999999; text-align: line-height:25}
.sub_more a{color:#999999;}
.sub_more a:hover{color:# text-decoration:}
/*********图片切换 css定义***********/
focus.js文件内容如下：
function $a(id,tag){var re=(id&&typeof id!="string")?id:document.getElementById(id);if(!tag){}else{return re.getElementsByTagName(tag);}}
//焦点滚动图 点击移动
function movec()
var o=$a("bd1lfimg","");
var oli=$a("bd1lfimg","dl");
var oliw=oli[0].offsetW //每次移动的宽度
var ow=o.offsetWidth-2;
var dnow=0; //当前位置
var olf=oliw-(ow-oliw+10)/2;
o["scrollLeft"]=olf+(dnow*oliw);
var rqbd=$a("bd1lfsj","ul")[0];
&!--for(var i=1;i&oli.i++){rqbd.innerHTML+="&li&"+i+"&/li&";}--&
var rq=$a("bd1lfsj","li");
for(var i=0;i&rq.i++){reg(i);};
oli[dnow].className=rq[dnow].className="show";
var wwww=setInterval(uu,2000);
function reg(i){rq[i].onclick=function(){oli[dnow].className=rq[dnow].className="";dnow=i;oli[dnow].className=rq[dnow].className="show";mv();}}
function mv(){clearInterval(extime);clearInterval(wwww);extime=setInterval(bc,15);wwww=setInterval(uu,8000);}
function bc()
var ns=((dnow*oliw+olf)-o["scrollLeft"]);
var v=ns&0?Math.ceil(ns/10):Math.floor(ns/10);
o["scrollLeft"]+=v;if(v==0){clearInterval(extime);oli[dnow].className=rq[dnow].className="show";v=}
function uu()
if(dnow&oli.length-2)
oli[dnow].className=rq[dnow].className="";
oli[dnow].className=rq[dnow].className="show";
else{oli[dnow].className=rq[dnow].className="";dnow=0;oli[dnow].className=rq[dnow].className="show";}
o.onmouseover=function(){clearInterval(extime);clearInterval(wwww);}
o.onmouseout=function(){extime=setInterval(bc,15);wwww=setInterval(uu,8000);}
aspx页面中引入js和css文件，及div文件
&link href="JS/main.css" type="text/css" rel="stylesheet" /&
&script src="JS/focus.js" type="text/javascript"&&/script&
&div id="flash"&
&div id="content"&
&div id="main2012"&
&div class="sub_box"&
&div id="p-select" class="sub_nav"&
&div class="sub_more"&
&a href="ItemsIndex/newsIndex.aspx?pmenuid=4
" onfocus="this.blur()" title="" style="font-family: T font-size: 12" target="_blank"&更多&&&/a&&/div&
&div class="sub_no" id="bd1lfsj"&
&li class="show"&1&/li&&li class=""&2&/li&&li class=""&3&/li&&li class=""&4&/li&&li
class=""&5&/li&&li class=""&6&/li&
&div id="bd1lfimg"&
&dl class="show"&
&dl class=""&
&dt&&a href='&%=imgLink[0] %&' title="" target="_blank"&
&img src='&%=imgUrl[0]%&' alt=""&&/a&&/dt&
&tt&&a href='&%=imgLink[0] %&' target="_blank"&
&%=imgText[0] %&
&dl class=""&
&dt&&a href='&%=imgLink[1] %&' title="" target="_blank"&
&img src='&%=imgUrl[1]%&' alt=""&&/a&&/dt&
&tt&&a href='&%=imgLink[1] %&' target="_blank"&
&%=imgText[1] %&
&dl class=""&
&dt&&a href='&%=imgLink[2] %&' title="" target="_blank"&
&img src='&%=imgUrl[2]%&' alt=""&&/a&&/dt&
&tt&&a href='&%=imgLink[2] %&' target="_blank"&
&%=imgText[2] %&
&dl class=""&
&dt&&a href='&%=imgLink[3] %&' title="" target="_blank"&
&img src='&%=imgUrl[3]%&' alt=""&&/a&&/dt&
&tt&&a href='&%=imgLink[3] %&' target="_blank"&
&%=imgText[3] %&
&dl class=""&
&dt&&a href='&%=imgLink[4] %&' title="" target="_blank"&
&img src='&%=imgUrl[4]%&' alt=""&&/a&&/dt&
&tt&&a href='&%=imgLink[4] %&' target="_blank"&
&%=imgText[4] %&
&dl class=""&
&dt&&a href='&%=imgLink[5] %&' title="" target="_blank"&
&img src='&%=imgUrl[5]%&' alt=""&&/a&&/dt&
&tt&&a href='&%=imgLink[5] %&' target="_blank"&
&%=imgText[5] %&
&script type="text/javascript"&movec();&/script&
上面aspx中的值来自后台cs文件
//图片链接新闻信息相关内容
public string[] imgUrl = new string[6];
public string[] imgText = new string[6];
public string[] imgLink = new string[6];
imgUrl = getFlashNewsImageUrl();
imgText = getFlashNewsImageText();
imgLink = getFlashNewsImageLink();
public string[] getFlashNewsImageUrl()
Data dt = new Data();
DataSet ds = dt.GetItemBytype();
string[] news = new string[ds.Tables[0].Rows.Count];
for (int i = 0; i & ds.Tables[0].Rows.C i++)
string Item_url = ds.Tables[0].Rows[i]["p_pic"].ToString();//图片新闻路径
news[i] = Item_
public string[] getFlashNewsImageText()
Data dt = new Data();
DataSet ds = dt.GetItemBytype();
string[] news = new string[ds.Tables[0].Rows.Count];
for (int i = 0; i & ds.Tables[0].Rows.C i++)
string newitem = ds.Tables[0].Rows[i]["p_name"].ToString();
if (newitem.Length & 20)
newitem = newitem.Substring(0, 16) + "...";
string Itemtitle =//图片新闻标题 itemtitle
public string[] getFlashNewsImageLink()
Data dt = new Data();
DataSet ds = dt.GetItemBytype();
string[] news = new string[ds.Tables[0].Rows.Count];
for (int i = 0; i & ds.Tables[0].Rows.C i++)
string Link = "ItemsContent/NewCont.aspx?nowmenuid=4&p_id=" + ds.Tables[0].Rows[i]["p_id"].ToString();//图片新闻链接地址
news[i] = L
PS：给大家推荐一个好的演示站点
&&&&推荐文章:
【上篇】【下篇】C#正则表达式如何将HTML图片路径中的src中不含http:的路径替换成绝对路径
&正则表达式替换求助如何将HTML图片路径中的src中不含http:的路径替换成绝对路径例如：&img&src=&logo.jpg&&替换成&img&src=&/logo.jpg&&
解决方法 1:
string result=Regex.Replace(imgHtml,@"&img([^&]*)src=\"(?!(http))(.*?)\"([^&]*)&",@"&img$1src=\"http:///$3\"$4&");怎么用js设置img标记的src？
[问题点数：20分，结帖人woaicsharp]
怎么用js设置img标记的src？
[问题点数：20分，结帖人woaicsharp]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
本帖子已过去太久远了，不再提供回复功能。4433人阅读
ASP.NET 2.0（14）
前些时间做一个东西不知道怎么写下去！ 网上都是先把图片上传然后再显示！
要么就是一大堆代码的那种！
其实这个还是得用&DIV&&/DIV&去显示图片会更好一点！
用js实现图片的比例压缩让图片一样能够很清楚！
不多话了！ 贴代码！！！
页面代码主要就是JS
&textarea cols=&50& rows=&15& name=&code& class=&xhtml&&&head runat=&server&&
&title&无标题页&/title&
&mce:script language=&javascript& type=&text/javascript&&&!--
function Imagesrc()
document.getElementById(&image&).src=document.all.FileUpload1.
// --&&/mce:script&
&form id=&form1& runat=&server&&
&img alt=&& id=&image&
style=&height:50width:50px& /&
&asp:FileUpload ID=&FileUpload1& runat=&server& onchange=&Imagesrc()& /&
&asp:Button ID=&btnPost& runat=&server&
Text=&上传& OnClick=&btnPost_Click& /&&/div&
&/body&&/textarea&
defualt.aspx.cs代码
&textarea cols=&50& rows=&15& name=&code& class=&c-sharp&& protected void btnPost_Click(object sender, EventArgs e)
string PostName = Server.MapPath(&Image&);
string fileName = FileUpload1.FileN
//是否包含此文件
if (FileUpload1.HasFile)
FileUpload1.SaveAs(PostName+&/&+fileName);
}&/textarea&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：227233次
积分：3385
积分：3385
排名：第6650名
原创：95篇
转载：35篇
评论：107条
(1)(1)(1)(1)(3)(2)(3)(3)(1)(1)(7)(3)(1)(4)(2)(8)(3)(6)(7)(9)(7)(5)(9)(8)(12)(11)(9)(2)HTML img and ASP.NET Image and relative paths - Stack Overflow
to customize your list.
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
J it only takes a minute:
Join the Stack Overflow community to:
Ask programming questions
Answer and help your peers
Get recognized for your expertise
What is the correct way to reference an image in ASP.NET for live deployment on IIS?
The following works in dev and production:
&asp:ImageButton ID="ibnEdit" runat="server" OnClick="ibnEdit_Click" ImageUrl="~/App_Themes/Default/images/one.png" Visible="false" ToolTip="Edit" /&
The following doesn't work in either: (why not?)
&img src="~/App_Themes/Default/images/two.gif" /&
The following works in dev but not in production:
&img src="../App_Themes/Default/images/two.gif" /&
If you want to use a regular img tag with the ~ path, you can just add runat="server" into the tag as an attribute (like regular server controls) and the path will be resolved. e.g:
&img src="~/App_Themes/Default/images/two.gif" runat="server" /&
For your second part, is the ../ image reference appearing on more than one page, for example a user control or master page (etc) such that you might be using it at different folder levels...
5,45384266
The ~ will only work on a server control such as
or . This tells ASP.Net to insert the application path. Sometime that's just "/" but if your application is not the root directory of the website it will include the path it is in. The img tag is just html and it will not be altered by ASP.Net, so the browser gets the path "~/App_Themes/Default/images/two.gif" and doesn't know how to read it.
I don't know why the last example works in dev but not in production. It might has something to do with having the application in the root directory in dev but in a sub directory in production.
I use this syntax for access images from master pages
&img src="&%=ResolveUrl("~/Content/Images/error_img.jp")%&" width="350" style="padding-right: 15 padding-top: 20"/&
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
Stack Overflow works best with JavaScript enabled