asp.net图片轮换效果
网站首页要做个图片轮换效果,在网上找个好几个,都没有后台添加功能,有的也调试不成功,谁有好用点的给个学习。要能调试成功,后台要能添加。
是不是用flash+js实现,在后台添加图片、题目、内容等或者flash+xml实现,xml里的内容怎么添加到数据库,我不是很明白,期待着高手的指教。
[解决办法]
你在网上找的,一般都会有一个配置文件,和具体的图片信息,后台维护实际上就是维护配置文件跟具体的图片。
至于xml里的内容怎么添加到数据库,查查操作xml方面的资料。
[解决办法]
前台js
<script type="text/javascript"> var focus_width = 229; var focus_height = 188; var focus_height = 188; var text_height = 23; var swf_height = focus_height + text_height; var swf_height = focus_height; [color=#FF0000] var pics = "<%= gundongpic %>";[/color] var texts = "|||"; var links = "Default.aspx|Default.aspx|Default.aspx|Default.aspx"; var keyword = "||||"; document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="' + focus_width + '" height="' + swf_height + '">'); document.write('<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="flash/pix.swf"><param name="quality" value="high"><param name="bgcolor" value="#F0F0F0">'); document.write('<param name="menu" value="false"><param name=wmode value="opaque">'); document.write('<param name="FlashVars" value="pics=' + pics + '&links=' + links + '&texts=&keyword=' + keyword + '&borderwidth=' + focus_width + '&borderheight=' + focus_height + '&textheight=' + text_height + '">'); document.write('<embed src="flash/pix.swf" wmode="opaque" FlashVars="pics=' + pics + '&links=' + links + '&texts=&keyword=' + keyword + '&borderwidth=' + focus_width + '&borderheight=' + focus_height + '&textheight=' + text_height + '" menu="false" bgcolor="#eeeeee" quality="high" width="' + focus_width + '" height="' + swf_height + '" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.write('</object>'); </script>
[解决办法]
1.JS
2.Flash
3.ASP.NET中的Adrotator控件
[解决办法]
/*
*此全部代码存为html可直接使用,或jsp中引用
*/
var widths=250; /*显示高度*/
var heights=150; /*显示宽度*/
var counts=5; /*照片数量*/
/**
*如果你是不固定的图片,可以使用数组定义,
让然下面一些代码也要有相应的改动,不多介绍,如果你不会可以问我。
var img=Array();//图片数组
var url=Array();//url数组
for(i=1;i<=counts;i++)
{
img[i]=new Image();
img[i].src=lst[i-1].imgurl;
url[i]=new Image();
url[i].src=lst[i-1].link;
}
**/
//一个img对应一个连接url,这在下面取得时候是对应的,如果你想改动,下面也要对应改动
//img.src是指图片路径,url是点击图片是跳转的页面连接。
img1=new Image ();img1.src='newphone/number1.JPG';
img2=new Image ();img2.src='newphone/number2.JPG';
img3=new Image ();img3.src='newphone/number3.JPG';
img4=new Image ();img4.src='newphone/number6.jpg';
img5=new Image ();img5.src='newphone/number4.JPG';
//img.src是指图片路径,url是点击图片是跳转的页面连接。
url1=new Image ();url1.src='';
url2=new Image ();url2.src='';
url3=new Image ();url3.src='';
url4=new Image ();url4.src='';
url5=new Image ();url5.src='';
url6=new Image ();url6.src='';
/* 以下基本不需要改动,不过当你涉及到改动变量和参数的时候 ,当然也有改动的必要*/
var nn = 1;
var key = 0;
function change_img() {
if (key == 0) {
key = 1;
} else {
if (document.all) {
document.getElementById("pic").filters[0].Apply();
//图片切换改变中的时间,越小切换越快
document.getElementById("pic").filters[0].Play(duration = 2);
}
}
eval("document.getElementById(\"pic\").src=img" + nn + ".src");
eval("document.getElementById(\"url\").href=url" + nn + ".src");
for (var i = 1; i <= counts; i++) {
document.getElementById("xxjdjj" + i).className = "axx";
}
document.getElementById("xxjdjj" + nn).className = "bxx";
nn++;
if (nn > counts) {
nn = 1;
}
//图片切换的时间间隔
tt = setTimeout("change_img()", 4000);
}
function changeimg(n) {
nn = n;
window.clearInterval(tt);
change_img();
}
document.write("<style>");
document.write(".axx{padding:0px 7px 3px;*padding:1px 7px;border-left:#cccccc 1px solid;}");
document.write("a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#666;}");
document.write("a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#999;}");
document.write(".bxx{padding:0px 7px 3px;*padding:1px 7px;border-left:#cccccc 1px solid;}");
document.write("a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}");
document.write("a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}");
document.write("</style>");
document.write("<div style=\"width:" + widths + "px;height:" + heights + "px;overflow:hidden;text-overflow:clip;\">");
document.write("<div><a id=\"url\"><img id=\"pic\" style=\"border:0px;filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward)\" width=" + widths + " height=" + heights + " /></a></div>");
document.write("<div style=\"filter:alpha(style=1,opacity=10,finishOpacity=80);-moz-opacity:0.8; opacity:0.8;background: #888888;width:100%-2px;text-align:right;top:-12px;position:relative;margin:1px;height:12px;padding:0px;margin:0px;border:0px;\">");
for (var i = 1; i < counts + 1; i++) {
document.write("<a href=\"javascript:changeimg(" + i + ");\" id=\"xxjdjj" + i + "\" class=\"axx\" target=\"_self\">" + i + "</a>");
}
document.write("</div></div>");
change_img();
------解决方案--------------------
我给你个
<asp:Repeater runat="server" ID="rpNewProduct"><HeaderTemplate> <%#"<script type=\"text/javascript\">"%> var pic_width=378; //图片宽度 var pic_height=110; //图片高度 var button_pos=5; //按扭位置 1左 2右 3上 4下 var stop_time=4000; //图片停留时间(1000为1秒钟) var show_text=1; //是否显示文字标签 1显示 0不显示 var txtcolor="000000"; //文字色 var bgcolor="ffffff"; //背景色 var pics="", links="", texts=""; </HeaderTemplate> <ItemTemplate> pics +='<%#(Container.ItemIndex ==0 )?"":"|"%><%#"adminmeberlogin/" + Eval("npimgurl")%>' links +='<%#(Container.ItemIndex ==0 )?"":"|"%>NewsProductBrowse.aspx?viewid=<%#Eval("npid")%>' texts +='<%#(Container.ItemIndex ==0 )?"":"|"%><%#Eval("npname")%>' </ItemTemplate> <FooterTemplate> var swf_height=show_text==1?pic_height+20:pic_height; document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cabversion=6,0,0,0" width="'+ pic_width +'" height="'+ swf_height +'">'); document.write('<param name="movie" value="images/banner.swf">'); document.write('<param name="quality" value="high"><param name="wmode" value="opaque">'); document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&pic_width='+pic_width+'&pic_height='+pic_height+'&show_text='+show_text+'&txtcolor='+txtcolor+'&bgcolor='+bgcolor+'&button_pos='+button_pos+'&stop_time='+stop_time+'">'); document.write('<embed src="images/banner.swf" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&pic_width='+pic_width+'&pic_height='+pic_height+'&show_text='+show_text+'&txtcolor='+txtcolor+'&bgcolor='+bgcolor+'&button_pos='+button_pos+'&stop_time='+stop_time+'" quality="high" width="'+ pic_width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.write('</object>'); <%#"</script>"%> </FooterTemplate></asp:Repeater>
[解决办法]
document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&borderwidth='+focus_width+'&borderheight='+focus_height+'">');
document.write('<embed src="flash/focus.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&borderwidth='+focus_width+'&borderheight='+focus_height+'" menu="false" bgcolor="#F0F0F0" quality="high" width="'+ focus_width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');
document.write('</object>');
</script>
[解决办法]
LZ说想要后台转换.
可以这样的思路吧。网上的轮换图片效果大多都是JS实现的。然后你找到JS获取图片路劲的那一节,用数据控件包含着,像Reapter那些,然后在代码后台写上图片路劲的数据绑定到控件上就可以随意的更换图片囖,要想高级的,也可以自己简单的弄个后台,就加些上传图片的功能,然后把路劲加到数据库。
[解决办法]
flash+javascript